tab切換簡單教學(xué)

// 獲取節(jié)點(diǎn)

var left_ul = document.querySelectorAll('.left_ul li');
var right_ul = document.querySelectorAll('.right_ul li');

// 通過for循環(huán)來循環(huán)每一項(xiàng)

for(var i = 0; i < left_ul.length; i++){
    // 保存每個(gè)循環(huán)到的下標(biāo)
    left_ul[i].ii = i;
    // 設(shè)置點(diǎn)擊事件 點(diǎn)擊當(dāng)前下標(biāo)進(jìn)行對(duì)當(dāng)前下表的操作
    left_ul[i].onclick = function(){
        // for循環(huán)循環(huán)每一項(xiàng) 把每一項(xiàng)的class屬性清空
        for(var j = 0; j < left_ul.length; j++){
            // 把每一項(xiàng)的class的class賦空 讓其消失
            left_ul[j].className='';
            right_ul[j].className='';
        }
    // 給當(dāng)前點(diǎn)擊的項(xiàng)附上class屬性賦值 讓其顯示
    left_ul[this.ii].className='jianghu1';
    right_ul[this.ii].className='jianghu';
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • feisky云計(jì)算、虛擬化與Linux技術(shù)筆記posts - 1014, comments - 298, trac...
    不排版閱讀 4,354評(píng)論 0 5
  • ??DOM(文檔對(duì)象模型)是針對(duì) HTML 和 XML 文檔的一個(gè) API(應(yīng)用程序編程接口)。 ??DOM 描繪...
    霜天曉閱讀 3,866評(píng)論 0 7
  • ReentrantLock 介紹 一個(gè)可重入的互斥鎖,它具有與使用{synchronized}方法和語句訪問的隱式...
    tomas家的小撥浪鼓閱讀 4,260評(píng)論 1 4
  • HashMap是一個(gè)散列表,通過鍵值對(duì)的形式對(duì)元素進(jìn)行存儲(chǔ),HashMap是線程不安全的,key-value都是可...
    小川君閱讀 1,640評(píng)論 1 1
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,514評(píng)論 0 21

友情鏈接更多精彩內(nèi)容