Bootstrap 3选定选项卡背景颜色

Question

我有一个bootstrap 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;
}

我的问题是如何获得具有不同背景颜色的选定选项卡(从tab 1、Tab 2或Tab 3)？它应该改变背景颜色，这取决于所选的选项卡。

Answer 1

尝试CSS：

背景ul li:第n个子节点(2){ .#selectedtab -color：#FF0000；} .#selectedtab ul li:第n个子节点(3){背景颜色：#336699；}

ANd等:)

IE 8及更早版本不支持上述功能。

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