页面加载时自动展开含active子元素的折叠面板及激活父按钮

核心逻辑说明 #

1. 页面初始化：自动定位包含active状态.tab-link的.acc-tab面板，为其添加show类展开，并激活对应的.btn-acc-tab按钮
2. Tab切换联动：点击不同面板下的.tab-link时，自动切换对应父面板的展开状态，同时更新按钮的active状态，旧面板同步移除相关状态

示例HTML结构（参考） #

<!-- 折叠面板按钮 -->
<button class="btn-acc-tab" data-target="#acc-panel-1">面板1</button>
<!-- 折叠面板内容 -->
<div class="acc-tab" id="acc-panel-1">
  <a href="#" class="tab-link active">子标签1-1</a>
  <a href="#" class="tab-link">子标签1-2</a>
</div>

<button class="btn-acc-tab" data-target="#acc-panel-2">面板2</button>
<div class="acc-tab" id="acc-panel-2">
  <a href="#" class="tab-link">子标签2-1</a>
  <a href="#" class="tab-link">子标签2-2</a>
</div>

jQuery实现代码 #

$(document).ready(function() {
  // 页面加载时初始化展开状态
  const activeTab = $('.tab-link.active');
  if (activeTab.length) {
    const targetPanel = activeTab.closest('.acc-tab');
    const targetBtn = $('.btn-acc-tab[data-target="#' + targetPanel.attr('id') + '"]');
    
    targetPanel.addClass('show');
    targetBtn.addClass('active');
  }

  // Tab切换事件处理
  $('.tab-link').on('click', function(e) {
    e.preventDefault();
    
    // 重置所有Tab的active状态
    $('.tab-link').removeClass('active');
    // 激活当前点击的Tab
    $(this).addClass('active');
    
    const currentPanel = $(this).closest('.acc-tab');
    const openedPanel = $('.acc-tab.show');
    
    // 如果当前Tab所在面板未展开，则切换面板状态
    if (!currentPanel.is(openedPanel)) {
      // 收起旧面板，取消对应按钮激活状态
      openedPanel.removeClass('show');
      $('.btn-acc-tab[data-target="#' + openedPanel.attr('id') + '"]').removeClass('active');
      
      // 展开当前面板，激活对应按钮
      currentPanel.addClass('show');
      $('.btn-acc-tab[data-target="#' + currentPanel.attr('id') + '"]').addClass('active');
    }
  });

  // 保留原有的折叠面板按钮点击逻辑（按需保留）
  $('.btn-acc-tab').on('click', function(e) {
    e.preventDefault();
    const targetId = $(this).data('target');
    const targetPanel = $(targetId);
    
    targetPanel.toggleClass('show');
    $(this).toggleClass('active');
  });
});

关键细节提示 #

• 确保按钮的data-target属性值与对应面板的id完全匹配，这是关联按钮和面板的核心
• 使用closest('.acc-tab')可以精准定位当前Tab的父级面板，不受DOM嵌套层级影响
• 初始化时加入activeTab.length判断，避免页面中无active状态Tab时出现无效操作

内容的提问来源于stack exchange，提问作者grommit