javascript - 在 Bootstrap 菜单栏中为所选元素设置背景，类似于 Bootstrap 中的父 Nav 选项

Question

下面是 Bootstrap 导航栏，我希望导航栏菜单选项在被选中时具有事件类的功能。

<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;
}

Answer 1

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