引導3選擇的標籤的背景色

我用下面的代碼和標籤的自舉3頂部導航欄：引導3選擇的標籤的背景色

<div class="tabbable" style="background:#85131a; font-family:'Franklin Gothic Book'"> 
<!--container--> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Top Menu</a> 
</div> 
<div class="navbar-collapse collapse" id="selectedtab"> 
    <ul class="nav navbar-nav" style="font-size: 16px; color:white; font-family:'Franklin Gothic Book'"> 
     <li> 
      <a style="color:white; line-height:40px;" href="<% $SPUrl:~sitecollection/ %>" runat="server">START</a> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" style="color:white; line-height:40px;" href="<% $SPUrl:~sitecollection/tab1/ %>" runat="server">Tab 1</a> 
      <ul class="dropdown-menu"> 
       <li><a href="<% $SPUrl:~sitecollection/tab1/dd1/ %>" runat="server">Dropdown item 1</a></li> 
       <li><a href="<% $SPUrl:~sitecollection/tab1/dd2/ %>" runat="server">Dropdown item 2</a></li> 

      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" style="color:white; line-height:40px;" href="<% $SPUrl:~sitecollection/tab2/ %>" runat="server">Tab 2</a> 
      <ul class="dropdown-menu"> 
       <li><a href="<% $SPUrl:~sitecollection/tab2/dd1 %>" runat="server">Dropdown item 1</a></li> 
       <li><a href="<% $SPUrl:~sitecollection/tab2/dd2 %>" runat="server">Dropdown item 2</a></li> 
       <li><a href="<% $SPUrl:~sitecollection/tab2/dd3 %>" runat="server">Dropdown item 3</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" style="color:white; line-height:40px;" href="<% $SPUrl:~sitecollection/tab3/ %>" runat="server">Tab 3</a> 
      <ul class="dropdown-menu"> 
       <li><a href="<% $SPUrl:~sitecollection/tab3/dd1 %>" runat="server">Dropdown item 1</a></li> 
       <li><a href="<% $SPUrl:~sitecollection/tab3/dd2 %>" runat="server">Dropdown item 2</a></li> 
       <li><a href="<% $SPUrl:~sitecollection/tab3/dd3 %>" runat="server">Dropdown item 3</a></li> 
      </ul> 
     </li> 
    </ul>                  
</div> 
<!--container--> 
</div>

JavaScript的：

$(document).ready(function() { 
$('#selectedtab ul li a').click(function (ev) { 
    $('#selectedtab ul li').removeClass('selected'); 
    $(ev.currentTarget).parent('li').addClass('selected'); 
}); 
});

CSS（除了所有的自舉標準CSS）：

#selectedtab ul li.selected { 
background-color:green !important; 
}

我的問題是如何獲得具有不同背景顏色的選定選項卡（從選項卡1，選項卡2或選項卡3）？它應該根據選定的選項卡更改背景顏色。

來源

2014-03-28 user2881765

你能創造出您的問題的jsfiddle？ –

這裏你去http://jsfiddle.net/ZccZF/ – user2881765

嘗試CSS：

＃selectedtab UL李：第n個孩子（2）{背景色：＃FF0000;}＃selectedtab UL李：。第n個孩子（3）{背景色：＃336699;}

等等:)

上面沒有通過IE 8和更早版本的支持。

如果你也想支持IE 8和更早的版本，你必須給每個標籤的另一個類，並定義爲每個類的背景：

來源

2014-03-28 11:02:12 sunilkjt

感謝您的回覆！但現在發生的情況是第二個和第三個標籤總是有另一個背景顏色，即使我沒有選擇標籤。解決方案是否可以使用URL和JavaScript來使用if語句？ – user2881765

引導3選擇的標籤的背景色

回答

相關問題