Jquery UI選項卡導航在CSS中的箭頭

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）通過使用img標籤並相對定位它，您可以在a中包含箭頭。

<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變成語義混亂。