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

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

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 вкладка в каждой вкладке Для мобильного телефона)?
Jandon, в 12:36 (источник)

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>