Question

我要在一页中创建两个彼此独立的选项卡切换。此处的这段代码仅允许一次切换选项卡，而另一个不活动的选项卡的内容则被隐藏。

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')
    });
});

Answer 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即可轻松创建选项卡切换布局。

一页中的两个选项卡切换不起作用

1 个答案: