多个标签行响应

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

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个选项卡适用于移动平台）？

来源

2016-12-30 Jandon

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

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

添加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() { 
 
\t $('.tabs .tab-link').not(this).removeClass('current');  
 
\t $(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>

来源

2016-12-30 13:09:16

多个标签行响应

回答

相关问题