jQuery更改選定選項卡的顏色

我對這個問題感到不好，因爲我發現了很多突出顯示jQuery中活動選項卡的條目，並嘗試了以下示例。但是我很難實現這些例子，所以我不確定我做錯了什麼。我已經創建了3個使用jQuery的標籤，我試圖改變所選標籤的背景顏色。jQuery更改選定選項卡的顏色

這裏是我的標籤代碼：

<div id="informationTabs"> 
     <ul id="tabs"> 
      <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" id="tab1Href">Email   &amp; Phone</a></li> 
      <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" id="tab2Href">Main Address</a></li> 
      <li class="individual-tab" id="mailingTab"><a href="#tabs-3" id="tab3Href">Mailing Address</a></li> 
     </ul> 
     <div id="tabs-1" class="tabs-windows"> 
      Change Email and Phone 
     </div> 
     <div id="tabs-2" class="tabs-windows"> 
      @Html.Action(Model.MainAddressPartialView) 
     </div> 
     <div id="tabs-3" class="tabs-windows"> 
      Mailing Address 
     </div> 
</div>

這裏是我使用創建的選項卡，並設置在頁面加載的活動選項卡JQuery的。

$("#informationTabs").tabs(); 
$(function() { 
    $("#informationTabs").tabs({ selected: 1 }); 
});

這是我試圖用來設置選定選項卡的背景的css類。它位於視圖中呈現的單獨的css類中。其他班級正常工作。

#tabs .ui-tabs-active { 
    background: #5ba63c; 
}

我是否忘記了JQuery函數的任何位置或設置應該設置選定選項卡的背景顏色？

在此先感謝。

來源

2014-11-02 Shaun

你在使用插件 '$（「＃informationTabs」）標籤（）;'？ – Macsupport 2014-11-02 19:08:18

@Macsupport似乎像jquery-ui選項卡。 @ Shaun，對我來說似乎都很好：http://jsfiddle.net/2w6cp269/，儘管試試這個：'background：＃5ba63c！important;' – 2014-11-02 19:36:03

嘿，夥計們，感謝您花時間檢查並給我一個想法在哪裏搜索。我用檢查元素進行了一些檢查，看到正在使用哪個類：ui-state-active。 – Shaun 2014-11-03 00:00:14

不知道，這是你在尋找什麼，但這個例子（至少在Firefox）展示的一種方式（也許不是最好的），以改變在切換標籤的CSS：

<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.css" /> 
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script> 
<script src="jquery-ui-1.11.2.custom/jquery-ui.js"></script> 
<script> 
$(document).ready(function() { 
     // Initialize active tab background color 
     $("#informationTabs").tabs({ 
      create: function (e, i) { 
       $('a.tab').css('background-color', 'white'); 
       i.tab.children('a').css('background-color', 'red'); 
      } 
     }); 
     // Change the background color on activate 
     $("#informationTabs").tabs({ 
      activate: function (e, i) { 
       $('a.tab').css('background-color', 'white'); 
       var current = $('a[href="#' + i.newPanel.attr("id") + '"]'); 
       current.css('background-color', 'red'); 
      } 
     }); 
}); 
</script> 
</head> 
<body> 
<div id="informationTabs"> 
    <ul id="tabs"> 
     <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" class="tab" id="tab1Href">Email   &amp; Phone</a></li> 
     <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" class="tab" id="tab2Href">Main Address</a></li> 
     <li class="individual-tab" id="mailingTab"><a href="#tabs-3" class="tab" id="tab3Href">Mailing Address</a></li> 
    </ul> 
    <div id="tabs-1" class="tabs-windows"> 
     Change Email and Phone 
    </div> 
    <div id="tabs-2" class="tabs-windows"> 
     @Html.Action(Model.MainAddressPartialView) 
    </div> 
    <div id="tabs-3" class="tabs-windows"> 
     Mailing Address 
    </div> 
</div> 
</body> 
</html>

希望這有助於。

P.S. This似乎是jQuery UI選項卡上的一個很好的教程。

P.P.S.作爲凱特提到你的方式工作得很好（在所有方面都比上面做得更好）。我已經把你的代碼在本地的HTML文件，並在Firefox中改變顏色很漂亮：

<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.css" /> 
<style type="text/css"> 
#tabs .ui-tabs-active { 
    background: #5ba63c; 
} 
</style> 
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script> 
<script src="jquery-ui-1.11.2.custom/jquery-ui.js"></script> 
<script> 
$("#informationTabs").tabs(); 
$(function() { 
     $("#informationTabs").tabs({ selected: 1 }); 
}); 
</script> 
</head> 
<body> 
<div id="informationTabs"> 
    <ul id="tabs"> 
     <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" id="tab1Href">Email   &amp; Phone</a></li> 
     <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" id="tab2Href">Main Address</a></li> 
     <li class="individual-tab" id="mailingTab"><a href="#tabs-3" id="tab3Href">Mailing Address</a></li> 
    </ul> 
    <div id="tabs-1" class="tabs-windows"> 
     Change Email and Phone 
    </div> 
    <div id="tabs-2" class="tabs-windows"> 
     @Html.Action(Model.MainAddressPartialView) 
    </div> 
    <div id="tabs-3" class="tabs-windows"> 
     Mailing Address 
    </div> 
</div> 
</body> 
</html>

來源

2014-11-02 20:18:26 a1111exe

謝謝a1111exe，caeth和macsupport採取立此存的jsfiddle和檢查到它的時間。我研究了Macsupport推薦的JQuery插件，看起來我們使用的是jquery選項卡1.8.24。當我檢查元素時，我注意到這個版本的jquery使用了.ui-state-active類。所以當我在css中改變它時，我得到了結果。請看下圖：

#tabs .ui-state-active { 
background: #5ba63c !important; 
}

再次感謝，肖恩

來源

2014-11-02 23:58:39 Shaun

jQuery更改選定選項卡的顏色

回答

相關問題