Question

我想在单击列表项的第二个子项时已经有类的特定元素上添加类，然后在单击任何其他列表项时删除该类。

我可以在链接上添加类onclick，但是当其他列表项被点击而不是第二个孩子时，不知道如何添加条件，所以我可以删除添加的类。

<ul class="acf-hl acf-tab-group">
  <li><a href="">tab1</a></li>
  <li class="active"><a href="">tab2</a></li>
  <li><a href="">tab3</a></li> 
</ul>
<div class="single-item ae0fgf0c hidden-by-tab"></div>
<div class="single-item ae0fgf0b hidden-by-tab"></div>
<h3 class="submit-button">Budget</h3> 
<div class="single-item ae0fgf045"></div>
<div class="single-item ae0fgf0e"></div>
<div class="single-item ae0fgf0cf hidden-by-tab"></div>
<div class="single-item ae0fgf0t hidden-by-tab"></div>

基本上是一个wordpress自定义字段插件，所以当项目被点击到其他项目相关元素时，它添加了“.hidden-by-tab”类，我在上面的某个类之前添加了一个html代码h3

<h3 class="submit-button">Budget</h3>

现在这个h3将出现在其他标签内容部分我希望隐藏在其他标签内容上，我只想在第二个列表内容上显示。

jQuery(document).ready(function($){
  $(".acf-field-54f5a4c9a71b0").before('<h3 class="submit-head">BUDGET</h3>');
  $(".acf-field-54f5a4c9a7497").before('<h3 class="submit-head">FUNDING</h3>');      
});

上面是我用来在特定类之前添加h3的jquery代码有任何解决方案来隐藏这个像相关类隐藏在其他选项卡上，如果你看到上面的代码添加“.active”类上面我试图瞄准了那个班级但没有成功。

if($(.acf-tab-group li:nth-child(2)).hasClass('active')){
  $(.submit-button).addClass("selected");
 }

在jsfiddle中它添加了类，但在实际代码中却没有。如果需要进一步解释，请帮助我或告诉我。

Answer 1

我想这就是你想要的：

$('.acf-hl').on('click', 'li', function () {
    if ($(this).index() == 1 && $(this).hasClass('active')) $('h3.submit-button').addClass('active');
    else $('.active').removeClass('active');
    return false;
});

演示：https://jsfiddle.net/tusharj/amrq3bf4/4/

另一个演示：https://jsfiddle.net/tusharj/amrq3bf4/5/

Answer 2

我希望这就是你要找的东西。

 $('.acf-tab-group > li').click(function(){
 var flag=$(this).hasClass('active');

if(flag){$('.submit-button').addClass("selected")}
else{$('.submit-button').removeAttr('class').addClass('submit-button')}


})

removeAttr将删除整个类属性，因此我再次添加了.submit-button类。

当列表的第二个孩子点击

2 个答案: