1

好的，所以我有一个标准的 twitter 引导导航，我只是想在选择活动链接时更改其背景颜色，例如 Home 或 Contact us .. 如果您在某个页面中，请立即使用 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 > li > a:active {background:blue} 之类的东西，但这似乎不起作用

4

5 回答 5

4 
a:active

你想要达到的目标是错误的

:active 伪选择器 -当您单击链接时，链接将变为活动状态。

尝试

.nav .active { background:blue }

> 符号将选择直接子元素。

于 2013-06-11T08:43:40.663 回答
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>

于 2013-06-11T08:49:15.580 回答
0

添加以下 javascript 以通过突出显示更新活动选项卡

$('ul.nav > li').click(function (e) {
    e.preventDefault();
    $('ul.nav > li').removeClass('active');
    $(this).addClass('active');
});
于 2015-04-27T09:06:06.647 回答
0

我必须针对a活动内部的元素li才能改变颜色

.active a {
    background-color: #FFFFFF !important;
}
于 2016-05-26T04:02:21.437 回答
0 
.nav-fixed=top>li.active>a
{
    //styling
}
于 2018-06-27T12:21:32.067 回答