Question

我尝试在当前<a></a>上添加课程，并希望从其他<a></a>中移除该有效课程。我正在尝试

HTML

 <ul>
  <li>
   <a href="#" class="active">
    Home
   </a>
  </li>
  <li>
   <a href="#">
    About
   </a>
  </li>
  <li>
   <a href="#">
    Service
   </a>
  </li>
</ul>

的jQuery

$('ul li a').click(function(e){
 e.preventDefault();
 $(this).addClass('active').siblings().removeClass('active');
});

Answer 1

＆＃13;

$('ul li a').click(function(e){
 e.preventDefault();
  $('ul li a').removeClass('active')
 $(this).addClass('active');
});

＆＃13;

.active{color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
   <a href="#" class="active">
    Home
   </a>
  </li>
  <li>
   <a href="#">
    About
   </a>
  </li>
  <li>
   <a href="#">
    Service
   </a>
  </li>
</ul>
jQuery

＆＃13;

您可以从锚中删除所有活动类，然后将活动类添加到单击锚

Answer 2

代码中的

a元素在父li

中没有兄弟

使用$('ul li a.active')选择器删除所有active类，然后将active类应用于当前元素

$('ul li a').click(function(e) {
  e.preventDefault();
  $('ul li a.active').removeClass('active')
  $(this).addClass('active');
});

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li>
    <a href="#" class="active">
    Home
   </a>
  </li>
  <li>
    <a href="#">
    About
   </a>
  </li>
  <li>
    <a href="#">
    Service
   </a>
  </li>
</ul>

Answer 3

你需要找到一个不是直接兄弟的标签元素，而是当前标签元素父节点兄弟的子节点。

使用以下代码查找 a标记元素，这些元素是所点击的标记元素的父级 li 的子级同级

$(this).addClass('active').parent("li").siblings("li").children("a").removeClass('active');

更新小提琴：https://jsfiddle.net/Lwzu738a/1/

如何使用jQuery从html元素中添加或删除类

3 个答案: