Question

好的，所以我有一个标准的twitter bootstrap导航，我只想更改活动链接的背景颜色，如Home或联系我们..现在，如果你在某个页面的背景导航栏中的li只是纯黑色，表明它已被选中。我希望它是蓝色的。这是代码：

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Logo</a>
          <div class="nav-collapse collapse text-center">
            <ul class="nav pull-right">
              <li class="active" id="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

我听说你会放点像.nav＆gt; li> a：主动{背景：蓝色}，但似乎无法正常工作

Answer 1

a:active

你想要实现的目标是错误的

：主动伪选择器 - 单击链接后，链接将变为活动状态。

尝试

.nav .active { background:blue }

＆gt;符号将选择直接子元素。

Answer 2

试试这个。

<style>
#home.active, #contract.active{
    background-color : blue
}

</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#">Logo</a>
        <div class="nav-collapse collapse text-center">
            <ul class="nav pull-right">
                <li class="active" id="home"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Events</a></li>
                <li id="contract"><a href="#">Contact</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

Answer 3

添加以下javascript以突出显示

更新活动标签

$('ul.nav > li').click(function (e) {
    e.preventDefault();
    $('ul.nav > li').removeClass('active');
    $(this).addClass('active');
});

Answer 4

我必须将活动a内的li元素定位为要更改的颜色

.active a {
    background-color: #FFFFFF !important;
}

Answer 5

.nav-fixed=top>li.active>a
{
    //styling
}

如何在twitter bootstrap nav </li>中更改活动<li>的背景

5 个答案: