使用jQuery UI的動態內容，唯一標籤活動狀態

Question

我想用jQuery ui創建一個帶有動態內容的jQuery菜單。

我的問題是，我有圖片的標籤，每一個都是不同的，所以每個人的翻身是不同的，我怎麼能設計它來顯示每個獨特的選項卡的活動狀態，當該特定的選項卡被點擊？

Thanx提前！

Answer 1

我會使用CSS並加載一個樣式表，該樣式表會根據插件在處於各種狀態時給予它們的類替換您的選項卡的樣式，以及根據其內容或位置給予它們的唯一類。確保你的樣式表是在jQuery UI樣式表之後加載的。標籤初始化後，通過並分配唯一的類，以便應用CSS。

.ui-tabs .ui-tabs-nav li.ui-tabs-selected.tab-0 
{ 
    background-image: url(/images/selected-tab-0.png); 
} 


$(function() { 
    $('.tabs').tabs(); 
    $('.tabs').find('li').each(function(i) { 
     $(this).addClass('tab-' + i); 
    }); 
}); 

請注意，您可以在負載調節選項卡如果圖像需要改變基於所選擇的網址 - 您的類將只需要依賴於您的href - 通過改變分配基於類在被加載的網址上。