在 BootStrap 菜单栏中设置所选项目的背景，类似于 Bootstrap 中的父导航选项答案

【问题标题】：Setting background for selected item in BootStrap Menu bar similar to parent Nav option in Bootstrap在 BootStrap 菜单栏中设置所选项目的背景，类似于 Bootstrap 中的父导航选项
【发布时间】：2016-05-14 07:52:11
【问题描述】：

以下是引导导航栏，我希望导航栏菜单选项在选中时具有活动类的功能。

<div class="navtop">
    <nav class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">SPL</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
          <ul class="nav navbar-nav">
            <li><a href="mainpage.php">Home </a></li>
            <li><a href="createteam.php">Create Team </a></li>
            <li><a href="pastscores.php">Past Scores</a></li>
          </ul>

    </nav>
</div>

目前，当我将鼠标悬停在导航列表上时，它会根据我在 bootstrap.theme.css 中所做的更改改变颜色，但当它是活动菜单时它不会保留。请帮我解决这个问题。

这些是我对 bootstrap.theme.css 所做的更改

.navbar-nav > li > a {
   text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.navbar-nav> li > a:hover,
.navbar-nav> li > a:focus {
background-color: #e8e8e8;
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #e8e8e8 100%);
background-image:      -o-linear-gradient(top, #3c3c3c 0%, #e8e8e8 100%);
background-image: -webkit-gradient(linear, left top, left bottom,   from(#3c3c3c), to(#e8e8e8));
background-image:         linear-gradient(to bottom, #3c3c3c 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
background-repeat: repeat-x;
}

【问题讨论】：

你正在关闭
但你从哪里开始呢？
对我来说没问题。在这里查看jsfiddle.net/pov2jp22 那么问题出在哪里？
Leo ，我用 div 替换了导航，认为这就是它不起作用的原因。是的，它在 jsfiddle 中工作正常，但最后悬停工作正常，但如果我将光标移开，背景不会停留。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这不是您的 css 类的问题，但是每当您单击任何菜单时，通过 jquery 或 javascript 将新类（假设 active）分配给相应的 <a> 标记并为同班（即active）

【讨论】：

嗨 Trimanta，我正在尝试使用您的方法在单击时添加一个类，但它对我不起作用，不知道为什么 .jsfiddle.net/pov2jp22/12 因为同样的事情是由另一个人 jsfiddle.net/XBfMV 完成的，效果很好. :(
您好，jsfiddle.net/pov2jp22/12 不起作用，因为没有添加 jquery 库。需要添加jquery库才能成功运行你的js代码。