javascript - 多标签行响应

Question

我尝试创建响应式多标签行。

台式机中有 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 个标签)？

Answer 1

回答您的第一个问题为什么我的标签内容显示在开头？

在 HTML 中，将类 current 添加到要显示的第一个 li

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

同时将显示类添加到您想要显示的第一个选项卡内容。

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

并在 css 中添加一个 show 类 display:block

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

在css中的tab-content类中添加display:none

.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>