Question

我想在链接的下一个父元素（li）中添加一个特定的类。例如，我在＆＃39; Home＆＃34;标签，但同时我也需要＆＃39;新课程＆＃39;到＆＃39;关于＆＃39;李。这是我的标记

这适用于静态类，但是当动态添加链接上的活动类时，这不起作用。

我尝试了这个但却无法正常工作

＆＃13;

    $('li a').click(function() {
if ($(this).hasClass('active')) {
    $(this).parent().next().addClass('active');
}
  else{
    $(this).parent().next().removeClass('active');
  }
});

＆＃13;

<ul>
  <li><a class="active" href="">Home</a></li>
  <li class="new-class"><a href="">About</a></li>
  <li><a href="">Service</a></li>
  <li><a href="">Portfolio</a></li>
  <li><a href="">Contact</a></li>
</ul>

＆＃13;

Answer 1

我认为这就是你想要的：

＆＃13;

$('li a').click(function(e) {
  e.preventDefault();
  $(this).closest('ul').find('a.active').removeClass('active');
  $(this).closest('ul').find('li.new-class').removeClass('new-class');
   
  $(this).addClass('active');
  $(this).parent().next().addClass('new-class');

});

＆＃13;

.active{ color:red; }
.new-class a { color:blue; }

＆＃13;

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

＆＃13;

Answer 2

有next()功能

$(this).parent().next().addClass('active');

然而，这不是你想要的。这为li添加了一个类。如果要将类添加到内部，则需要

$(this).parent().next().find("a").addClass('active');

Answer 3

$(this).parent().next().addClass('active');

这将首先到达被点击的锚的li。然后，如果单击第一个li，它将按顺序选择下一个元素作为第二个li，然后，我们将该类添加到该元素。

Answer 4

如果我理解正确（点击a上课active将课程new-class添加到后续li？），这应该有效：

$('.tab a').click(function() {
  if ($(this).hasClass('active')) {
    $(this).parent().next().addClass('new-class');
  } else{
    $(this).parent().next().removeClass('new-class');
  }
});

如何将班级添加到下一个家长李？

4 个答案: