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

【问题标题】：How can I darken the background when a linked is clicked?单击链接时如何使背景变暗？
【发布时间】：2018-08-12 11:08:49
【问题描述】：

我目前正在开发我网站的导航栏。我的导航栏上有五个元素，我想让一个元素在单击时变暗。
这些是我迄今为止尝试过的：
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>

这是网站的截图：

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

【问题讨论】：

你使用引导程序吗？

标签： php jquery html css navbar

【解决方案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;
}

【讨论】：

【解决方案2】：

使用代码如下：

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

$('.nav .navbar-nav a') instaed $('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>

【讨论】：

你的意思是什么？

【解决方案3】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：