jQuery的：菜單欄類似「標籤」，但沒有改變的div

Question

我試圖找出如何產生像jQuery's tabs plugin標籤，但沒有資料覈實的交換。換句話說，我想要一個只是繪製標籤欄的jQuery插件（並讓我指定選擇哪個標籤）。當點擊標籤時，我會照顧內容的繪製和事情的發生。

Answer 1

所有你需要做的，就是複製jQuery用戶界面適用於標籤的類，你所有的設置。

然後，您還可以在用戶點擊其中一個時動態添加/刪除類。

這實際上是jQuery UI在選項卡上執行的方式。

下面是他們使用了一些示例類：

ui-tabs ui-widget ui-widget-content ui-corner-all 

我檢查DOM後jQuery UI的已經應用了標籤功能得到了這些。做同樣的事情，你會看到你需要哪些類的元素。

編輯：

下面是完整的HTML：

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#">The selected tab</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#">Other tabs</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#">Other tabs</a></li> 
    </ul> 
</div> 

而這裏的Java腳本：

$('.ui-tabs-nav li').mouseenter(function(){ 
    $(this).addClass('ui-state-hover'); 
}) 
.mouseleave(function(){ 
    $(this).removeClass('ui-state-hover'); 
}) 
.click(function(){ 
    $(this).addClass('ui-tabs-selected ui-state-active') 
     .siblings().removeClass('ui-tabs-selected ui-state-active'); 

    return false; 
}); 

，當然，我們會在哪裏沒有小提琴：http://jsfiddle.net/Bsa7J/ 。