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

我可以添加类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中,它添加了类,但在实际代码中却没有。请帮助我或让我知道是否需要进一步的解释。

最佳答案

我想这就是你想要的:

$('.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/

07-24 09:38
查看更多