Question

有人知道，我的代码有什么问题吗？当您在页面中时，当前颜色或背景将发生变化。例如导航的颜色是红色，所以当你去约会我们时，它的颜色将是黄色，其余的链接仍然是红色，这是我的小提琴：

 <ul class="topnav" id="main-menu">
      <li ><a href="#" class="active" ><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
      <li><a href="#" ><i class="fa fa-file" aria-hidden="true"></i> Home2</a></li>
      <li><a href="#" ><i class="fa fa-codepen" aria-hidden="true"></i> Home3</a></li>
      <li><a href="#" ><i class="fa fa-globe" aria-hidden="true"></i> Home4</a></li>
  </ul>


#main-menu li {
display: inline-block;
font-family: 'Raleway', sans-serif;

padding: 17px 25px;
}
#main-menu li a {
   color:#333333;
   font-size:15px;
}
#main-menu li.active a {
 color:#0198cf;
}
 #main-menu li:last-child  {
 padding-right: 0;
}
.active{background-color:#ccc;}



$(document).ready(function(e){
  $('#main-menu li').click(function(e) {
    $('#main-menu li').removeClass('active');
    $(this).addClass('active');
  });
});

Ps：我使用header.php，所以我不需要复制每个页面中的所有导航，所以基本上如果答案是在每个页面中放置一个活动的类不是答案

Answer 1

您正在选择li而不是在click事件中选择li的内部。

$(document).ready(function(e){
    $('#main-menu li').click(function(e) {
      $('#main-menu li a').removeClass('active');
      $(this).children("a").addClass('active');
    });
  });

Answer 2

请检查。这是工作。你忘了把jQuery min文件。

$(document).ready(function(e){
  $('#main-menu li a').click(function(e) {         
    $('#main-menu li a').removeClass('active');
    $(this).addClass('active');
  });
});

#main-menu li {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  padding: 17px 25px;
}
#main-menu li a {
  color:#333333;
  font-size:15px;
}
#main-menu li.active a {
  color:#0198cf;
}
#main-menu li:last-child  {
  padding-right: 0;
}
.active{
  background-color:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="topnav" id="main-menu">
  <li ><a href="#" class="active" ><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
  <li><a href="#" ><i class="fa fa-file" aria-hidden="true"></i> Home2</a></li>
  <li><a href="#" ><i class="fa fa-codepen" aria-hidden="true"></i> Home3</a></li>
  <li><a href="#" ><i class="fa fa-globe" aria-hidden="true"></i> Home4</a></li>
</ul>

如何使用jquery更改导航链接的颜色或背景颜色？

2 个答案: