Bootstrap 3选定的选项卡背景色

Question

我有一个带有以下代码和标签的bootstrap 3 Top导航栏：

<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）？ 它应根据所选选项卡更改背景颜色。

Answer 1

尝试CSS：

。＃selectedtab ul li：nth-​​child（2）{background-color：＃FF0000;}。＃selectedtab ul li：nth-​​child（3）{background-color：＃336699;}

等等 ：）

IE 8和更早版本不支持以上功能。

如果还希望支持IE 8和更早版本，则必须为每个选项卡提供另一个类，并为每个这些类定义背景：