複数のタブ行が応答します

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にトグルアクションを追加する方法（要素自体をクリックするとタブコンテンツを表示/非表示）？
• 一度に1つのタブコンテンツをリスト全体に表示するにはどうすればよいですか？
• レスポンスの構造を変更するには（タブレットの各タブで2つのタブ、モバイルの各タブで1つのタブ）

Answer 1

質問に答える最初の質問私のタブの内容が最初に表示されるのはなぜですか？

は、HTMLでは、あなたが

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

はまた、あなたが示したことにしたい最初のタブのコンテンツには、show classを追加表示したい最初のliにクラスcurrentを追加します。

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

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

0で tab-contentクラスに display:noneを追加 display:block

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

とCSSのクラスshowを追加