Javascript JQuery显示/隐藏避免多个组中的冲突

我有一个简单的导航，它显示/隐藏div，并向导航添加/删除一个活动类。它工作得很好，但如果我的页面上有类似的部分，它们就会发生冲突（单击第一个导航中的链接也会隐藏其他部分中的div）

在“数据组a”与“数据组b”不冲突的情况下，如何使显示/隐藏节的多个实例保持一致

我的HTML：

<section class="show-hiders" data-group="a">
    <div class="col-md-6">

        <ul class="nav nav-pills">
            <li class="active"><a href="" data-related="1">Subject 1</a></li>
            <li><a href="" data-related="2">Subject 2</a></li>
            <li><a href="" data-related="3">Subject 3</a></li>
        </ul>

      <div  class="show-hider show-first" data-id="1">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic1" alt="" />
      </div>
      <div  class="show-hider" data-id="2">
          <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic2" alt="" />
      </div>
      <div  class="show-hider" data-id="3">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic3" alt="" />
      </div>
    </div>

    <div class="col-md-6">
          <div class="show-hider show-first" data-id="1">
            <p>Text content 1</p> 
          </div>
          <div class="show-hider" data-id="2">
             <p>Text content 2</p>   
          </div>
          <div class="show-hider" data-id="3">
            <p>Text content 3</p> 
          </div>
    </div>
</section>

<section class="show-hiders" data-group="b">
    <div class="col-md-6">

        <ul class="nav nav-pills">
            <li class="active"><a href="" data-related="4">Subject 4</a></li>
            <li><a href="" data-related="5">Subject 5</a></li>
            <li><a href="" data-related="6">Subject 6</a></li>
        </ul>

      <div  class="show-hider show-first" data-id="4">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic4" alt="" />
      </div>
      <div  class="show-hider" data-id="5">
          <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic5" alt="" />
      </div>
      <div  class="show-hider" data-id="6">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic6" alt="" />
      </div>
    </div>

    <div class="col-md-6">
          <div class="show-hider show-first" data-id="4">
            <p>Text content 4</p> 
          </div>
          <div class="show-hider" data-id="5">
             <p>Text content 5</p>   
          </div>
          <div class="show-hider" data-id="6">
            <p>Text content 6</p> 
          </div>
    </div>
</section>

您可以使用查找最近的上升元素，以查找您所在的

元素-如果随后保存此选择，您可以与其他选择器一起使用，以确保您只在该

中搜索

//SHOW-HIDERS
$（“.show hider”）.each（函数（）{
$（this.hide（）；
if（$（this.attr（'class'）=='show hider show first'）{
$（this.show（）；
}
});
$（'.show hiders.nav a'）。打开（“单击”，函数（e）{
e、 预防默认值（）；
//返回我们所处的元素
const$group=$（this.closest（'section[data group]'）；
设id=$（this.attr（'data-related'）；
//在中查找“.show hider”元素
$group.find（“.show hider”）.each（函数（）{
$（this.hide（）；
if（$（this）.attr（'data-id'）==id）{
$（this.show（）；
}
});
});
$（'.show hiders.nav li'）。在（'click'，function（）上{
$（this.sibles（）.removeClass（'active'））
$（this.addClass（'active'）；
})

文本内容1

文本内容2

文本内容3

演示
演示
演示





文本内容4

文本内容5

文本内容6

您可以使用来查找最近的上升元素，以查找您所在的

元素-如果随后保存此选择，您可以与其他选择器一起使用，以确保只在该

元素中搜索

//SHOW-HIDERS
$（“.show hider”）.each（函数（）{
$（this.hide（）；
if（$（this.attr（'class'）=='show hider show first'）{
$（this.show（）；
}
});
$（'.show hiders.nav a'）。打开（“单击”，函数（e）{
e、 预防默认值（）；
//返回我们所处的元素
const$group=$（this.closest（'section[data group]'）；
设id=$（this.attr（'data-related'）；
//在中查找“.show hider”元素
$group.find（“.show hider”）.each（函数（）{
$（this.hide（）；
if（$（this）.attr（'data-id'）==id）{
$（this.show（）；
}
});
});
$（'.show hiders.nav li'）。在（'click'，function（）上{
$（this.sibles（）.removeClass（'active'））
$（this.addClass（'active'）；
})

文本内容1

文本内容2

文本内容3

演示
演示
演示





文本内容4

文本内容5

文本内容6

非常感谢您，特别是您花时间清楚地展示了我如何选择最近的上升元素。非常感谢。非常感谢您，特别是您花时间清楚地展示了我如何选择最近的上升元素。非常感谢。

//SHOW-HIDERS
$(".show-hider").each(function(){
     $(this).hide();
    if($(this).attr('class') == 'show-hider show-first') {
        $(this).show();
    }
});

$('.show-hiders .nav a').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $(".show-hider").each(function(){
        $(this).hide();
        if($(this).attr('data-id') == id) {
            $(this).show();
        }
    });
});

$('.show-hiders .nav li').on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})