Несколько вкладок строка отзывчивый

Я пытаюсь создать отзывчивую строку с несколькими вкладками.

3 элемента в рабочем столе, 2 элемента в планшете и 1 в мобильном телефоне.

Но у меня есть некоторые проблемы. Могу я попросить помощи ?

https://jsfiddle.net/qbh79xoy/35/

<div class="tabs">
    <ul>
        <li class="active"><a href="#tab0">Tab 0</a></li>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 1</a></li>
    </ul>
    <div id="tab0" class="tab-content">Tab 0</div>
    <div id="tab1" class="tab-content">Tab 1</div>
    <div id="tab2" class="tab-content">Tab 2</div>
</div>

<div class="tabs">
    <ul>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
        <li><a href="#tab5">Tab 5</a></li>
    </ul>
    <div id="tab3" class="tab-content">Tab 3</div>
    <div id="tab4" class="tab-content">Tab 4</div>
    <div id="tab5" class="tab-content">Tab 5</div>
</div>

Мои вопросы :

  • Почему мое содержимое вкладки отображается в начале ?
  • Как добавить действие переключения на каждой вкладке li (Показать/Скрыть содержимое вкладки при нажатии на сам элемент) ?
  • Как отобразить одну вкладку за раз во всем списке ?
  • Как изменить структуру для адаптивного (2 вкладки в каждой вкладке Для планшета, 1 вкладка в каждой вкладке Для мобильного телефона)?

1 ответ

  1. Чтобы ответить на ваш первый вопрос, почему мое содержимое вкладки отображается в начале ?

    В HTML добавить классcurrent, чтобы сначала liвы хотите показать

    <li><a href="#tab1" class="tab-link current">Word 01</a></li>
    

    Также добавьте класс show в содержимое первой вкладки, которое вы хотите показать.

    <div id="tab1" class="tab-content show">Definition of word 01</div>
    

    И добавьте класс showв css с display:block

    .tab-content.show {
      display: block;
    }
    

    Добавить display:noneв tab-contentкласс в css

    .tab-content {
      display:none;
      background: #ededed;
      padding: 15px;
    }
    

    $('.tabs .tab-link').each(function (index, item) {
       $(item).attr('data-link', index);
    });
    
    $('.tab-content .tab-content').each(function (index, item) {
       $(item).attr('data-content', index);
    });
    
    $('.tabs .tab-link').click(function () {
    	$('.tabs .tab-link').not(this).removeClass('current');    
    	$(this).toggleClass('current');
    });
    
    
     $(".tabs li").click(function() {
            $(this).parent().parent().find(".tab-content").hide();
            var selected_tab = $(this).find("a").attr("href");
            $(selected_tab).fadeIn();
            $(this).parent().find("li").removeClass('current');
            $(this).addClass("current");
            return false;
    });
    body {
      margin-top: 100px;
      font-family: 'Trebuchet MS', serif;
      line-height: 1.6
    }
    
    .wrapper {
      width: 300px;
      margin: 0 auto;
    }
    
    .tabs li {
      background: none;
      width: 33%;
      float: left;
      color: #222;
      display: inline-block;
      padding: 10px 0;
      cursor: pointer;
      text-align: center;
    }
    
    .current {
      color: red;
    }
    
    .tab-content {
      display:none;
      background: #ededed;
      padding: 15px;
    }
    
    .tab-content.show {
      display: block;
    }
    
    @media screen and (max-width: 768px) {
      .tabs li {
        width: 50%;
      }
    }
    
    @media screen and (max-width: 480px) {
      .tabs li {
        width: 100%;
      }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="tabs">
      <ul>
        <li><a href="#tab1" class="tab-link current">Word 01</a></li>
        <li><a href="#tab2" class="tab-link">Word 02</a></li>
        <li><a href="#tab3" class="tab-link">Word 03</a></li>
      </ul>
      <div id="tab1" class="tab-content show">Definition of word 01</div>
        <div id="tab2" class="tab-content">Definition of word 02</div>
        <div id="tab3" class="tab-content">Definition of word 03</div>
    </div>
    <div class="tabs">
      <ul>
        <li><a href="#tab4" class="tab-link">Word 04</a></li>
        <li><a href="#tab5" class="tab-link">Word 05</a></li>
        <li><a href="#tab6" class="tab-link">Word 06</a></li>
      </ul>
        <div id="tab4" class="tab-content">Definition of word 04</div>
        <div id="tab5" class="tab-content">Definition of word 05</div>
        <div id="tab6" class="tab-content">Definition of word 06</div>
    </div>