带有CSS箭头的Jquery UI Tab导航

Question

您好，我正在尝试为处于事件状态的 Jquery UI 选项卡导航创建一个向下箭头，类似这样。

它目前在没有向下箭头的情况下工作正常。我见过这个胎面Jquery UI Tab with Arrow但是我的 HTML div 类没有 li 元素的类“active”。有人可以告诉我解决这个问题的方法是什么吗？谢谢!

<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 会在语义上造成混淆。