在標籤上使用Javascript的活動狀態

Question

有沒有一種方法可以使用Javascript，這樣當頁面默認加載時，它的第一個標籤顏色爲深綠色。此外，一旦你點擊標籤，活動狀態變成深綠色。我已經將它設置在CSS中，以便懸停狀態變爲深綠色，但我需要使用JavaScript的活動狀態。

非常感謝您的幫助！我剝離了很多代碼。

.tabs_accordion { 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
} 
 

 

 
.tabs_accordion > input { 
 
    /*position: relative; 
 
    left: -50000px; 
 
    height: 0px; 
 
    line-height: 0;*/ 
 
    display: none; 
 
} 
 

 
.tabs_accordion > input:nth-child(1):checked ~ ul.tabs > li:nth-of-type(1) { 
 
    font-weight: bold; 
 
} 
 
.tabs_accordion > input:nth-child(1):checked ~ div.content > label:nth-of-type(1) { 
 
    font-weight: bold; 
 
    margin-bottom: 0; 
 
} 
 
.tabs_accordion > input:nth-child(1):checked ~ div.content > div:nth-of-type(1) { 
 
    display: block; 
 
    border-top: none; 
 
    background-image:url(picture-1.jpg); 
 
    min-height: 380px; 
 
\t background-repeat:no-repeat; 
 
    \t -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    background-size: contain; 
 
} 
 
.tabs_accordion > input:nth-child(2):checked ~ ul.tabs > li:nth-of-type(2) { 
 
    font-weight: bold; 
 
} 
 
.tabs_accordion > input:nth-child(2):checked ~ div.content > label:nth-of-type(2) { 
 
    font-weight: bold; 
 
    margin-bottom: 0; 
 
} 
 
.tabs_accordion > input:nth-child(2):checked ~ div.content > div:nth-of-type(2) { 
 
    display: block; 
 
    border-top: none; 
 
    background-image:url(picture-2.jpg); 
 
    min-height: 380px; 
 
\t background-repeat:no-repeat; 
 
    \t -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    background-size: contain; 
 
} 
 
.tabs_accordion > input:nth-child(3):checked ~ ul.tabs > li:nth-of-type(3) { 
 
    font-weight: bold; 
 
} 
 
.tabs_accordion > input:nth-child(3):checked ~ div.content > label:nth-of-type(3) { 
 
    font-weight: bold; 
 
    margin-bottom: 0; 
 
} 
 
.tabs_accordion > input:nth-child(3):checked ~ div.content > div:nth-of-type(3) { 
 
    display: block; 
 
    border-top: none; 
 
    background-image:url(picture-3.jpg); 
 
    min-height: 380px; 
 
\t background-repeat:no-repeat; 
 
    \t -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    background-size: contain; 
 
} 
 

 

 

 
.tabs_accordion ul.tabs { 
 
    display: table; 
 
    width: 100%; 
 
    display: none; 
 
    background-color: #deeab4; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    color:#333333; 
 
    font-size: 16px; 
 
} 
 
.tabs_accordion ul.tabs li { 
 
    display: table-cell; 
 
    cursor: pointer; 
 
    width: 238px; 
 
    
 
} 
 

 
.tabs_accordion ul.tabs li label:active { 
 
\t background-color: #8cd600; 
 
\t 
 
} 
 

 

 
/* begin controls hover */ 
 
.tabs_accordion [id^="tab"]:checked + label { 
 
    background: green; 
 
} 
 
/* end controls hover */ 
 

 
.tabs_accordion ul.tabs li label { 
 
    display: block; 
 
    height: 74px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    border-left: 2px solid #c8c8c8; 
 
    margin: 0px 0; 
 
    box-sizing: border-box; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
} 
 
.tabs_accordion ul.tabs li label:focus { 
 
    background-color: #8cd600; 
 
} 
 
.tabs_accordion ul.tabs li label:active { 
 
    background-color: #8cd600; 
 
} 
 
.tabs_accordion ul.tabs li:hover { 
 
    background-color: #8cd600; 
 
    color:#FFFFFF; 
 
} 
 

 
.tabs_accordion ul.tabs li:hover label { 
 
    border-left-color: transparent; 
 
} 
 
.tabs_accordion ul.tabs li:hover + li > label { 
 
    border-left-color: transparent; 
 
} 
 
.tabs_accordion ul.tabs li:first-child label { 
 
    border-left-color: transparent; 
 
} 
 
.tabs_accordion div.content > label { 
 
    display: block; 
 
    background-color: #deeab4; 
 
    padding: 20px; 
 
    margin-bottom: 1em; 
 
    cursor: pointer; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    text-align:center; 
 
} 
 
.tabs_accordion div.content > div { 
 
    display: none; 
 
    padding: 10px; 
 

 
    margin-bottom: 1em; 
 
} 
 

 
    .tabs_accordion ul.tabs { 
 
    display: table; 
 
    } 
 
    .tabs_accordion div.content > label { 
 
    display: none; 
 
    } 
 
    .tabs_accordion div.content > div { 
 
    margin-bottom: 0; 
 
    } 
 
\t

<div class="tabs_accordion"> 
 

 
<input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" /> 
 
<input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" /> 
 
<input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" /> 
 
    
 
    <ul class="tabs"> 
 
    <li><label for="tab_1_content_control">Option 1</label></li> 
 
    <li><label for="tab_2_content_control">Option 2</label></li> 
 
    <li><label for="tab_3_content_control">Option 3</label></li> 
 
    </ul> 
 
    
 
    <div class="content"> 
 
    
 
    <label for="tab_1_content_control">Option 1</label> 
 
    <div class="tab_1_content"> 
 
     
 
    </div> 
 
     
 
    <label for="tab_2_content_control">Option 2</label> 
 
    <div class="tab_2_content"> 
 
    </div> 
 
    
 
    <label for="tab_3_content_control">Option 3</label> 
 
    <div class="tab_3_content"> 
 
    </div>  
 
    
 
    </div> 
 
</div>

Answer 1

添加一個新的CSS類活動標籤

.activeTab 
{ 
    background-color: green; 
} 

，並在文檔準備好時，你可以得到的第一個標籤項（li元素），然後添加此新的CSS類。同樣，當用戶點擊時，刪除當前活動類並將activeTab類設置爲新點擊的項目。

$(function(){ 

    //Make first one active 
    $(".tabs>li").first().addClass("activeTab"); 

    $(".tabs>li").click(function(e){ 

    var _this = $(this); 

    //Remove existing active one 
    $(".activeTab").removeClass("activeTab"); 

    //Set the css class to the clicked one 
    _this.addClass("activeTab"); 

    }); 


}) 

Here是一個工作示例。