Question

我目前正在网站的导航栏上工作。导航栏上有五个元素，当我单击元素时，我想使其更暗。
这些是我到目前为止尝试过的：
jQuery更改活动元素：

  <script type="text/javascript">
        $(function(){
            $('nav navbar-nav a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
            $('nav navbar-nav a').click(function(){
                $(this).parent().addClass('active').siblings().removeClass('active')    
            })
        })
  </script>

导航栏上的五个元素：

<nav class = "navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>                        
</button>
 <a class="navbar-brand" href="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Intern</a></li>
    <li><a href="#">Form</a></li>
  </ul>

这是网站的屏幕截图：

但似乎不起作用，每次都只选择关于。有任何想法吗？非常感谢。

Answer 1

<script type="text/javascript">
        $(function(){
         $(".navbar-nav li a").on('click',function(){
            $(nav-bar-nav li).toggleClass("active"); 
});

});

 <ul class="nav navbar-nav">
    <li class=""><a href="#">About</a></li>  /*Just remove active class and add with js*/
    <li><a href="#">News</a></li>
    <li><a href="#">Intern</a></li>
    <li><a href="#">Form</a></li>
  </ul>

.active{
background:black;
}

.active a{
  color:#ffffff;
}

Answer 2

使用以下代码：

不要忘记 .在JQuery中的className之前：

$('.nav .navbar-nav a') 已安装 $('nav navbar-nav a')

 $('.navbar-nav li a').click(function(){
    $(".navbar-nav li").removeClass("active");
   $(this).parent().addClass("active");
});

.active{
background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class = "navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>                        
</button>
 <a class="navbar-brand" href="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Intern</a></li>
    <li><a href="#">Form</a></li>
  </ul>

Answer 3

我猜你可能为jQuery提供了错误的选择器

  $('div.nav li a').click(function(){
               $(this).parent().addClass('active').siblings().removeClass('active')    
            })
        })

选择器 $("nav li a") or $(".navbar-nav li a") 应该工作正常

Answer 4

只需删除点击的li上的活动类，然后将其分配给被点击的li：

$('.navbar-nav li').click(function(){
 $('.navbar-nav li').removeClass('active');
 $(this).addClass('active')
})

.navbar-nav li {
 list-style: none; 
 display: inline;
 padding: 5px 10px;
 background: #d4d4d4;
}

.navbar-nav li a {
  color: #222;
  text-decoration: none;
}

.navbar-nav li.active {
  background: black;
}
  
.navbar-nav li.active a {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Intern</a></li>
    <li><a href="#">Form</a></li>
  </ul>

单击链接时如何使背景变暗？

4 个答案: