两个选项卡在一个页面中切换不起作用答案

【问题标题】：two tab switching in one page not working两个选项卡在一个页面中切换不起作用
【发布时间】：2019-10-28 09:38:07
【问题描述】：

我想在一个页面中创建两个相互独立的选项卡切换。这里的代码只允许一次切换一个选项卡，并且隐藏另一个不活动的选项卡的内容。

HTML：

//FIRST TAB
    <ul id="tab">
       <li>OPTION 1</li>
       <li class="select">OPTION 2</li>
    </ul>
    <div class="content_wrap disnon">
      <p><a href="#">●●●●●111</a></p>
      <p><a href="#">●●●●●222</a></p>
    </div>
    <div class="content_wrap">
      <p><a href="#">●●●●●111</a></p>
      <p><a href="#">●●●●●222</a></p>
      <p><a href="#">●●●●●333</a></p>
    </div>

//SECOND
    <ul id="tab">
       <li class="select">OPTION A</li>
       <li>OPTION B</li>
    </ul>
    <div class="content_wrap">
      <p><a href="#">●●●●●AAA</a></p>
      <p><a href="#">●●●●●BBB</a></p>
      <p><a href="#">●●●●●CCC</a></p>
      <p><a href="#">●●●●●DDD</a></p>
    </div>
    <div class="content_wrap disnon">
      <p><a href="#">●●●●●AAA</a></p>
      <p><a href="#">●●●●●BBB</a></p>
    </div>

JScript：

$(function() {
    $("#tab li").click(function() {
        var num = $("#tab li").index(this);
        $(".content_wrap").addClass('disnon');
        $(".content_wrap").eq(num).removeClass('disnon');
        $("#tab li").removeClass('select');
        $(this).addClass('select')
    });
});

【问题讨论】：

标签： javascript tabs jscript

【解决方案1】：

这里有几件事要先检查。

这两个选项卡具有相同的 ID。 ID 应该是唯一的，例如 tab1 和 tab2。
如果你能给我们看看这个文件的css就更好了。

但是，如果我的假设是正确的 tab1 -> 点击 -> 显示 tab1 内容和 tab2 -> 点击 -> 显示 tab2 内容。代码如下。

// USING EITHER HTML5 DATA TAGS OR INDIVIDUAL ID'S
<ul class="tab" data-tab="1"> ... </ul>
<ul class="tab" data-tab="2"> ... </ul>

<div id="tabContent1" class="tabContent"></div>
<div id="tabContent2" class="tabContent" style="display:none"></div> 
// SET NOT TO DISPLAY WHEN FIRST ACTIVE

<script>
$('.tab').on('click',function() {
    // SELECT CLICKED TAB'S DATA (ie 1 / 2) IN THIS CASE
    var tab = $(this).data('tab');
    // HIDE ALL OTHER tabContent
    $('.tabContent').hide();
    // SHOW ONE TAB
    $('#tabContent' + tab).show();
});

这已经过简化，可以轻松扩展为多个标签。只需添加更多 uls 和 div 即可轻松创建选项卡切换布局。

【讨论】：