переключение двух вкладок на одной странице не работает - PullRequest
Новая
       8

переключение двух вкладок на одной странице не работает

0 голосов
/ 28 октября 2019

Я хочу создать две независимые друг от друга вкладки на одной странице. Этот код позволяет переключать вкладки только по одной за раз, а содержимое другой неактивной вкладки скрыто.

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

1 Ответ

0 голосов
/ 28 октября 2019

Сначала нужно проверить несколько вещей.

  1. Обе эти вкладки имеют одинаковый идентификатор. Идентификаторы должны быть уникальными, скажем, tab1 и tab2.
  2. Было бы лучше, если бы вы могли показать нам 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, можно легко создать макет переключения вкладок.

...