当单击list的第二个子元素时，向特定元素添加类

Add class to a particular element when second child of list clicked

本文关键字：元素 添加 list 第二个 单击      更新时间：2023-09-26

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

我可以添加类点击链接，但不明白如何添加条件时，其他列表项点击，而不是第二个子，所以我可以删除添加的类。

<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自定义字段插件，所以它添加了"。当项目被点击到其他项目相关元素时，"按标签隐藏"类，我在某些类之前添加了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代码，是否有任何解决方案来隐藏这个像其他选项卡上的相关类隐藏，如果你看到上面的代码添加"。

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/

我希望这是你正在寻找的。

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

相关文章：