0

嗨，我正在尝试为处于活动状态的 Jquery UI 选项卡导航制作一个向下箭头，如下所示。

在此处输入图像描述

它目前在没有向下箭头的情况下工作正常。我已经看到这个带有箭头的 Jquery UI 选项卡，但我的 HTML div 类没有 li 元素的“活动”类。有人可以告诉我这个问题的解决方案是什么吗？谢谢！

<div class="menuArea">
      <ul>
        <li><a href="#activeTap" data-tab-name="activeTab">ACTIVE</a></li>
        <li><a href="#inactiveTap" data-tab-name="inactiveTab">INACTIVE</a></li>
      </ul>
    </div>

这是 jquery ui-tabs 的 CSS。

.ui-tabs {

    background-color: #ffffff;
    padding-bottom: 10px;
}
.ui-tabs-nav {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 35px;
    background:url("../images/gradient_default.gif") repeat-x;
}
.ui-tabs-nav li {
    width: 150px;
    text-align: center;
    list-style: none;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 3px;
}

.ui-tabs-active {
    background:url("../images/gradient_active.gif");
    font-weight:bold;
}

.ui-tabs-active a {
    color:#fff;
}
4

1 回答 1

1

您的问题有两种可能的解决方案。

1) 您可以将箭头作为活动链接的背景图像的一部分。这可能需要对您的 CSS 进行调整。

a2）您可以通过使用img标签并将其相对定位来将箭头包含在内部。

<a href="#activeTap" data-tab-name="activeTab">ACTIVE<img src="path/to/arrow.png" /></a>

position:relative;
top:/*some value*/;
left:/*some value*/;

这样做的缺点 - 如果你关心的话 - 是使用 css 背景图像和 img 会在语义上变得混乱。

于 2013-07-12T17:59:43.463 回答