技術標籤：前端入門jscssjavascript

想要的效果：點選到選項卡中不同標籤時，被選中的標籤背景顏色變紅

html檔案：選項卡

<div class="seckill-nav">
<ul id="tabs">
    <li class="activate"><em>18:00</em><span><em>即將開始<br>距開始01:25:15</em></span></li>
    <li>
 
<em>20:00</em><span>即將開始</span></li>
    <li><em>22:00</em><span>即將開始</span></li>
    <li><em>00:00</em><span>明日開始</span></li>
    <li><em>08:00</em><span>明日開始</span></li>
</ul>
</
 
div>

css檔案：activate定義紅色背景樣式

.seckill-nav .activate {
    background-color: #f1393a;
}

JS檔案實現標籤切換功能：此處將每個li標籤都綁定了監聽，當點選到某個li時，觸發監聽，遍歷所有標籤，如果是點中的標籤(this)，就新增class，否則清空class

var tabs = document.getElementById("tabs").getElementsByTagName("li");
console.log(tabs);
for (var i =0; i <
 
tabs.length; i++){
    tabs[i].onclick = liClick;
}
function liClick(){
    for (var i=0; i<tabs.length;i++){
        if (tabs[i] == this){
            tabs[i].className = "activate";
        }else{
            tabs[i].className = '';
        }

    }
}

效果：