jQuery UI選項卡，帶有兩個「未選中」的陰影

我已經給出了一個使用標籤導航結構的構建設計，我使用jQuery UI的選項卡插件構建了這個結構。jQuery UI選項卡，帶有兩個「未選中」的陰影

到目前爲止，這麼好。唉，我試圖爲選項卡式元素本身設計風格，使得當前選定的選項卡（li.ui-tabs-selected）具有白色背景，而另外兩個選項卡具有綠色背景 - 但是，這裏是粘性部分，每個人都有不同的綠色陰影。

換句話說：

我有三個列表元素，全部採用一流的.ui狀態默認。所選的一個被賦予額外的類.ui-tabs-selected並且是白色的;未選擇的是兩個綠色陰影，其中較淺的陰影總是進一步向左，並且沒有兩個標籤具有相同的顏色（即，每個白色，深綠色和淺綠色），而不管選擇哪個。 如何讓兩個不同顏色的非選定標籤具有相同的類別？

謝謝！

來源

2011-05-11 aendrew

好吧..我現在看到它..我認爲不同的陰影在未選中時仍保留在同一個標簽上，但這樣它們一直都在變化。 – ariel 2011-05-11 08:13:00

我想出了你的帖子中的鏈接;這是足夠小的選項卡數量，我只是分別設置每個選項卡。 – aendrew 2011-05-11 08:21:39

完全編輯答案..這是你需要什麼？ – ariel 2011-05-11 08:22:54

所以，你需要的是這樣的：

$('#tabs').bind('tabsselect', function(event, ui) { 
    $('#tabs ul li').each(function(count) { 
     $(this) 
      .removeClass('tab0 tab1 tab2 tab3 tab4') 
      .addClass('tab' + abs(ui.index - count)); 
    } 
});

類TAB0是所選選項卡，TAB1了一個在它旁邊，等等。

這樣做是每次選擇選項卡時，從li刪除所有類，並根據（ui.index - count）添加一個類。如果ui.index = count（選擇的選項卡是我們當前正在處理的選項卡），則該值爲0;如果距離爲1，則爲1，依此類推。

來源

2011-05-11 07:55:14 ariel

輝煌。謝謝！ – aendrew 2011-05-11 08:23:59

jQuery UI選項卡，帶有兩個「未選中」的陰影

回答

相關問題