Question

Codepen：http://codepen.io/Travo100/pen/DtwvG

我目前遇到一个问题，我有一个典型的导航菜单设置，并希望点击链接，点击时添加一个类。但是，我一次只想要一个链接就可以使用这个类。我已经设置了一个codepen，目前我的代码是让所有链接都拥有这个类，而不是在点击链接后删除它。

HTML

    <nav>
  <ul>
    <li><a href="#" class="selected">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

a {
  text-decoration: none;
  padding: 10px;
  margin-left: 5px
}

li {
  float: left;
  list-style: none
}
.selected, a:hover {
  background-color: blue;
  color: white;
}

JS

 //When clicking on control list items 
$("nav a").click(function() {
//Deselect sibling elements 
$(this).siblings().removeClass( "selected" );
  //Select clicked element 
$(this).addClass( "selected" );
});

我是jQuery / javascript的新手，所以我为这个基本问题道歉。

感谢您的帮助。

Answer 1

使用此选项，删除＆＃34;已选择＆＃34;来自所有nav a的课程并添加＆＃34;已选中＆＃34;要点击元素的类。

$("nav a").click(function() {
//Deselect sibling elements 
$("nav a").removeClass( "selected" );
  //Select clicked element 
$(this).addClass( "selected" );
});

Answer 2

http://codepen.io/anon/pen/djxJH

在添加类之前删除该类。

代码：

$("nav a").click(function() {
  $('.selected').removeClass( "selected" );
  $(this).addClass( "selected" );
});

jQuery - 添加和删除选定的类

2 个答案: