Jquery UI 选项卡导航与 CSS 中的箭头

Question

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

目前在没有向下箭头的情况下可以正常工作。我已经看到了Jquery UI Tab with Arrow 的这条线索，但我的 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;
}

Answer 1

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

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

2) 您可以在a 中包含箭头，方法是使用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 会在语义上变得混乱。