多個標籤行響應

我嘗試創建一個響應式多選項卡行。多個標籤行響應

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

多個標籤行響應

回答

相關問題