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（除了所有bootstrap标准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及更早版本，则必须为每个标签提供另一个类，并为每个类定义背景：

Bootstrap 3选择标签背景颜色

1 个答案: