如何将类添加到下一个父项目li？

Question

我想添加一个特定的类到链接的下一个父元素（li）。例如，我在'主页'选项卡上有活动班，但同时我也需要'关于'新班' 这里是我的标记

这是工作的静态类，但当链接添加活动类动态，这是行不通的。

我试过，但不能使工作

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

<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>

Answer 1

我想这是你想要什么：

$('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'); 
 

 
});

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

<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>

Answer 2

有next()功能

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

但是，这不是你想要的。这给li增加了一个类。如果你想给类添加到里面，你需要

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

Answer 3

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

这将首先到达锚的李被点击。 然后，它将选择下一个元素，以便在第一个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'); 
    } 
});