如何用jQuery或原生JS实现同class的a标签独立控制对应区块内容

问题根源 #

你的代码在切换内容时没有限定操作范围，全局选中了所有内容元素，导致两个Section的内容同步变化。核心是要把操作锁定在当前点击标签所在的Section内部。

jQuery 实现方案 #

假设你的HTML结构如下（统一类名便于选择）：

<section>
  <div class="tab-group">
    <a href="#" data-target="content-1" class="tab-link">Tab 1</a>
    <a href="#" data-target="content-2" class="tab-link">Tab 2</a>
    <a href="#" data-target="content-3" class="tab-link">Tab 3</a>
  </div>
  <div class="content-group">
    <div id="content-1" class="tab-content">Content 1</div>
    <div id="content-2" class="tab-content">Content 2</div>
    <div id="content-3" class="tab-content">Content 3</div>
  </div>
</section>
<section>
  <!-- 完全相同的结构 -->
</section>

对应的jQuery代码：

// 初始化：隐藏每个Section里非第一个的内容
$('.content-group .tab-content:not(:first)').hide();

// 绑定点击事件
$('.tab-link').on('click', function(e) {
  e.preventDefault();
  // 1. 找到当前点击标签所属的Section
  const $currentSection = $(this).closest('section');
  // 2. 获取目标内容的ID
  const targetId = $(this).data('target');

  // 3. 隐藏当前Section内所有内容
  $currentSection.find('.tab-content').hide();
  // 4. 显示目标内容
  $currentSection.find(`#${targetId}`).show();

  // 可选：给当前激活标签加高亮
  $currentSection.find('.tab-link').removeClass('active');
  $(this).addClass('active');
});

原生JS 实现方案 #

如果不想依赖jQuery，用原生JS同样可以实现：

// 初始化
document.querySelectorAll('.content-group').forEach(group => {
  const contents = group.querySelectorAll('.tab-content');
  // 隐藏非第一个内容
  for(let i = 1; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }
});

// 绑定点击事件
document.querySelectorAll('.tab-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    // 找到当前Section
    const currentSection = this.closest('section');
    const targetId = this.dataset.target;

    // 隐藏当前Section内所有内容
    currentSection.querySelectorAll('.tab-content').forEach(content => {
      content.style.display = 'none';
    });
    // 显示目标内容
    currentSection.getElementById(targetId).style.display = 'block';

    // 可选：高亮激活标签
    currentSection.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
    this.classList.add('active');
  });
});

代码优化建议 #

1. 避免依赖ID：可以用data-index替代data-target，通过索引匹配内容，更灵活（比如标签和内容按顺序一一对应，不用写ID）：

   <a href="#" data-index="0" class="tab-link">Tab 1</a>
   <!-- 内容 -->
   <div class="tab-content">Content 1</div>
   

   点击时通过parseInt(this.dataset.index)获取索引，然后选中对应位置的.tab-content。
2. 用CSS控制初始状态：添加CSS规则代替JS初始化隐藏，更高效：

   .content-group .tab-content:not(:first-child) {
     display: none;
   }
   .tab-link.active {
     color: #007bff; /* 高亮样式 */
     font-weight: bold;
   }
   

3. 事件委托：如果Section是动态生成的，用事件委托绑定事件，避免重复绑定：

   // jQuery 事件委托
   $('body').on('click', '.tab-link', function(e) {
     // 逻辑同上
   });
   
   // 原生JS 事件委托
   document.body.addEventListener('click', function(e) {
     if(e.target.classList.contains('tab-link')) {
       e.preventDefault();
       // 逻辑同上
     }
   });
   

内容的提问来源于stack exchange，提问作者Still Learning Web