Twitter bootstrap 引导3所选选项卡背景色

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

CSS（除所有引导标准CSS外）：

我的问题是如何获得具有不同背景颜色的所选选项卡（来自选项卡1、选项卡2或选项卡3）？它应该根据所选选项卡更改背景颜色。

尝试CSS：

.#selectedtab ul li:n子项（2）{背景色：#FF0000；}。#selectedtab ul li:n子项（3）{背景色：#336699；}

等等：）

IE 8及更早版本不支持上述内容

---

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

您能创建一个JSFIDLE来显示您的问题吗？谢谢您的回复！但是现在发生的是，第二个和第三个选项卡总是有另一种背景颜色，即使我没有选择选项卡。解决方案可以是使用URL和JavaScript来使用if语句吗？

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

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