Question

假设我有几乎完全相同的代码：

<div id="the-story" class="tabs-content">
    <div id="panel01" class="content active">
          panel01 content
    </div>
    <div id="panel02" class="content">
          panel02 content
    </div>
</div>

<ul class="tabs" data-tab="">
    <li class="tab-title active"><a href="#panel01">ONE</a></li>
    <li class="tab-title"><a href="#panel02">TWO</a></li>
</ul>

我的第二段代码：

<div id="the-scene" class="tabs-content">
    <div id="panel01" class="content active">
          panel01 content
    </div>
    <div id="panel02" class="content">
          panel02 content
    </div>
</div>

<ul class="tabs" data-tab="">
    <li class="tab-title active"><a href="#panel01">ONE</a></li>
    <li class="tab-title"><a href="#panel02">TWO</a></li>
</ul>

如果这两个在同一页面上，我如何使用jQuery定位特定的一个？或者我如何确保我想在文档就绪时触发的功能仅影响其中一个？

例如，这会影响两者：

$('.tab-title').removeClass("active");
$('.content').removeClass("active");

我可以在具有唯一ID或？

的div中包装代码的两个“块”

Answer 1

要更改$('.content')，您可以使用少数选择器：

$('#the-story .content').removeClass("active");

和

$('#the-scene .content').removeClass("active");

Answer 2

要阐述我对DOM遍历的评论，请点击标签点击的方式：

$('.tab-title').click(function() {
    $(this).removeClass("active");
    var tabIndex = $(this).index();
    $('.content').eq(tabIndex).removeClass("active");
});

通过定位与标签具有相同索引的内容面板，完全无需ID定位。

具有特定ID的元素内的目标元素

2 个答案: