如何让所有.tab-nav-wrapper-report下的active标签对应内容全部显示？

原代码的问题在于，$(".tab-nav-wrapper-report li.active a").attr("href")只会返回第一个匹配元素的href属性值，导致只有第一个Tab模块的Active内容被显示，第二个模块的对应内容未被触发。

要让所有.tab-nav-wrapper-report li.active对应的Tab内容都显示，需要遍历每一个匹配的Active项，逐个处理：

修改后的jQuery代码 #

$(document).ready(function() {
    // 遍历所有active的tab项
    $(".tab-nav-wrapper-report li.active").each(function() {
        $(this).click(); // 触发点击事件
        // 获取当前项的href，找到对应内容并显示
        $($(this).find("a").attr("href")).show();
    });
})

完整代码示例 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-controls-report mt-4">
  <div class="tab-nav-wrapper-report">
    <ul>
      <li class="active" data-id="1">
        <a href="#2_1">Test3</a>
      </li>
      <li>
        <a href="#3_1" data-id="1">Test4</a>
      </li>
    </ul>
  </div>
  <div class="tab-content-wrapper-report">
    <div id="2_1" class="tab-content" style="display:none;">
      //Something in here
    </div>
  </div>
</div>
<div class="tab-nav-wrapper-report">
  <ul>
    <li class="active" data-id="2">
      <a href="#2_2">Test1</a>
    </li>
    <li>
      <a href="#3_2" data-id="2">Test2</a>
    </li>
  </ul>
</div>
<div class="tab-content-wrapper-report">
  <div id="2_2" class="tab-content" style="display:none;">
    //Something in here
  </div>
  <div id="3_2" class="tab-content" style="display:none;">
    //Something in here
  </div>
</div>

JavaScript部分 #

$(document).ready(function() {
    $(".tab-nav-wrapper-report li.active").each(function() {
        $(this).click();
        $($(this).find("a").attr("href")).show();
    });
})

核心逻辑是用.each()方法遍历所有符合条件的Active标签，对每个标签单独执行点击触发和内容显示操作，确保每个模块的Active内容都能被正确激活。

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