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;
}

我的问题是如何获得具有不同背景颜色的选定选项卡（从选项卡 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 及更早版本，则必须为每个选项卡指定另一个类并为每个类定义背景：