帶有jQuery ui的動態內容，唯一的選項卡處於活動狀態

Question

我想使用jQuery ui創建具有動態內容的jQuery菜單。

我的問題是，我有一些用於選項卡的圖像，並且每個圖像都不相同，因此每個人的翻轉都不相同，當單擊該特定選項卡時，如何設計它以顯示每個唯一選項卡的活動狀態？

提前感謝！

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 );
   });
});

請注意，如果圖像需要根據所選的url進行更改，則可以調整加載選項卡-您的類僅需要依賴於href-通過更改基於要加載的url分配的類即可。