Question

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

桌面设备有3个，平板电脑有2个，移动设备有1个。

但我有一些问题。我可以帮忙吗？

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

还要将show class添加到您想要显示的第一个标签内容中。

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

使用show

在css中添加课程display:block

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

将display:none添加到css

中的tab-content类

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

＆＃13;

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

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

多个标签行响应

1 个答案: