tab切换简单教学

// 获取节点

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

// 通过for循环来循环每一项

for(var i = 0; i < left_ul.length; i++){
    // 保存每个循环到的下标
    left_ul[i].ii = i;
    // 设置点击事件 点击当前下标进行对当前下表的操作
    left_ul[i].onclick = function(){
        // for循环循环每一项 把每一项的class属性清空
        for(var j = 0; j < left_ul.length; j++){
            // 把每一项的class的class赋空 让其消失
            left_ul[j].className='';
            right_ul[j].className='';
        }
    // 给当前点击的项附上class属性赋值 让其显示
    left_ul[this.ii].className='jianghu1';
    right_ul[this.ii].className='jianghu';
    }
}