使用JQuery或Javascript創建選項卡

Question

如何使用JQuery或JavaScript實現與當前CSS相同的行爲，其中點擊了div時顯示選項卡的內容？

例如，如果我點擊了SUN，它會顯示sunday選項卡的內容，即「今天是星期天」，如果點擊MON顯示「今天是星期一」。

我該如何使用JQuery和Javascript而不是CSS來實現這一點？

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700'); 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    padding: 2px; 
 
    background: #E5E4E2; 
 
} 
 

 
.tabinator { 
 
    background: #fff; 
 
    padding: 1px; 
 
    font-family: Open Sans; 
 
    margin-top: 10px; 
 
} 
 

 
.tabinator input { 
 
    display: none; 
 
} 
 

 
.tabinator label { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    padding: 5px 0.6%; 
 
    color: #ccc; 
 
    margin-bottom: -1px; 
 
    margin-left: -1px; 
 
    font-family: courier; 
 
    font-weight: bold; 
 

 
} 
 

 
.tabinator label:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    height: 15px; 
 
    background-color: #fff; 
 
    position: absolute; 
 
    bottom: -4px; 
 
    left: 0; 
 
    z-index: 10; 
 
} 
 

 
.tabinator label:hover { 
 
    color: red; 
 
    cursor: pointer; 
 
} 
 

 
.tabinator input:checked+label { 
 
    position: relative; 
 
    color: red; 
 
    font-weight: bold; 
 
    background: #fff; 
 
    border: 1px solid #bbb; 
 
    border-bottom: 1px solid #fff; 
 
    border-radius: 5px 5px 0 0; 
 
    font-size: 22px; 
 
} 
 

 
.tabinator input:checked+label:after { 
 
    display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    box-shadow: 0 0 15px #939393; 
 
} 
 

 
#content1, 
 
#content2, 
 
#content3, 
 
#content4, 
 
#content5, 
 
#content6, 
 
#content7 { 
 
    display: none; 
 
    border-top: 1px solid #bbb; 
 
    padding: 3px; 
 
    margin-top: 2px; 
 
} 
 

 
#tab1:checked~#content1, 
 
#tab2:checked~#content2, 
 
#tab3:checked~#content3, 
 
#tab4:checked~#content4, 
 
#tab5:checked~#content5, 
 
#tab6:checked~#content6, 
 
#tab7:checked~#content7 { 
 
    display: block; 
 
    box-shadow: 0 0 15px #939393; 
 
}

<div class="tabinator"> 
 

 
     <input type="radio" id="tab1" name="tabs" checked> 
 
     <label for="tab1">SUN</label> 
 
     <input type="radio" id="tab2" name="tabs"> 
 
     <label for="tab2">MON</label> 
 
     <input type="radio" id="tab3" name="tabs"> 
 
     <label for="tab3">TUE</label> 
 
     <input type="radio" id="tab4" name="tabs"> 
 
     <label for="tab4">WED</label> 
 
     <input type="radio" id="tab5" name="tabs"> 
 
     <label for="tab5">THU</label> 
 
     <input type="radio" id="tab6" name="tabs"> 
 
     <label for="tab6">FRI</label> 
 
     <input type="radio" id="tab7" name="tabs"> 
 
     <label for="tab7">SAT</label> 
 
    
 
    
 
    <div id="content1"> 
 
    <p> This is Sunday</> 
 
    </div> 
 

 
     <div id="content2"> 
 
     <p> This is Monday</p> 
 
      </div> 
 
     
 
      <div id="content3"> 
 
     <p> This is Tuesday</p> 
 
       </div> 
 
      
 
       <div id="content4"> 
 
     <p> This is Wednesday</p> 
 
        </div> 
 
        <div id="content5"> 
 
     <p> This is Thursday</p> 
 
         </div> 
 
         <div id="content6"> 
 
     <p> This is Friday</p> 
 
          </div> 
 
          <div id="content7"> 
 
     <p> This is Saturday</p> 
 
           </div>

Answer 1

有關於如何使用JavaScript，使標籤上W3Schools的一篇大文章 - https://www.w3schools.com/howto/howto_js_tabs.asp

每個content格應給予通用類。如tabcontent。當單擊其中一個單選按鈕切換選項卡時，將會運行一個功能來隱藏所有tabcontent div（隱藏所有顯示的選項卡），然後僅顯示所需的內容。

使用jQuery我想出了這個代碼 - HTML

<div class="tabinator"> 
     <input type="radio" id="tab1" name="tabs" checked> 
     <label for="tab1">SUN</label> 
     <input type="radio" id="tab2" name="tabs"> 
     <label for="tab2">MON</label> 
     <input type="radio" id="tab3" name="tabs"> 
     <label for="tab3">TUE</label> 
     <input type="radio" id="tab4" name="tabs"> 
     <label for="tab4">WED</label> 
     <input type="radio" id="tab5" name="tabs"> 
     <label for="tab5">THU</label> 
     <input type="radio" id="tab6" name="tabs"> 
     <label for="tab6">FRI</label> 
     <input type="radio" id="tab7" name="tabs"> 
     <label for="tab7">SAT</label> 

    <div id="content1" class="tabcontent"> 
    <p> This is Sunday</> 
    </div> 

    <div id="content2" class="tabcontent"> 
     <p>This is Monday</p> 
    </div> 

    <div id="content3" class="tabcontent"> 
     <p> This is Tuesday</p> 
    </div> 

    <div id="content4" class="tabcontent"> 
     <p> This is Wednesday</p> 
    </div> 
    <div id="content5" class="tabcontent"> 
     <p> This is Thursday</p> 
    </div> 
    <div id="content6" class="tabcontent"> 
     <p> This is Friday</p> 
    </div> 
    <div id="content7" class="tabcontent"> 
     <p> This is Saturday</p> 
</div> 

CSS

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700'); 
* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 2px; 
    background: #E5E4E2; 
} 

.tabinator { 
    background: #fff; 
    padding: 1px; 
    font-family: Open Sans; 
    margin-top: 10px; 
} 

.tabinator input { 
    display: none; 
} 

.tabinator label { 
    box-sizing: border-box; 
    display: inline-block; 
    padding: 5px 0.6%; 
    color: #ccc; 
    margin-bottom: -1px; 
    margin-left: -1px; 
    font-family: courier; 
    font-weight: bold; 

} 

.tabinator label:before { 
    content: ''; 
    display: block; 
    width: 100%; 
    height: 15px; 
    background-color: #fff; 
    position: absolute; 
    bottom: -4px; 
    left: 0; 
    z-index: 10; 
} 

.tabinator label:hover { 
    color: red; 
    cursor: pointer; 
} 

.tabinator input:checked+label { 
    position: relative; 
    color: red; 
    font-weight: bold; 
    background: #fff; 
    border: 1px solid #bbb; 
    border-bottom: 1px solid #fff; 
    border-radius: 5px 5px 0 0; 
    font-size: 22px; 
} 

.tabinator input:checked+label:after { 
    display: block; 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    box-shadow: 0 0 15px #939393; 
} 

.tabcontent {display: none;} 
#content1 {display: block;} 

jQuery函數

$('input[name=tabs]').click(function(){ 
     var id = $(this).attr('id'); 
    $('.tabcontent').css('display', 'none'); 

    switch (id) { 
     case "tab1": 
     $('#content1').css('display', 'block'); 
     break; 
     case "tab2": 
     $('#content2').css('display', 'block'); 
     break; 
     case "tab3": 
     $('#content3').css('display', 'block'); 
     break; 
     case "tab4": 
     $('#content4').css('display', 'block'); 
     break; 
     case "tab5": 
     $('#content5').css('display', 'block'); 
     break; 
     case "tab6": 
     $('#content6').css('display', 'block'); 
     break; 
     case "tab7": 
     $('#content7').css('display', 'block'); 
     break; 
    } 
}); 

只要所有tabcontent元素的顯示設置爲none，並且要顯示的內容設置爲與block一起顯示，則可以使用其他方法而不是開關語句。

希望這能達到你想要的。