选项卡2

//第一种

/*    //导航

        var nav=document.querySelectorAll('.nav li');

        //选项卡内容

      var main=document.querySelectorAll('.main li');

      var i=0;

        setInterval(function(){

        //a是当前数组的下标

        var a=i;

        i++;

        if(a==3){

        i=0;

        }

        //b是上一个数组的下标

        var b=a-1;

        if(a==0){

        b=3

        }

        if(nav[a].style.background='#000'){  //如果当前元素背景是黑色

        nav[a].style.background='red';  //那就让他背景变红

        nav[b].style.background='#000';  //让他上一个兄弟背景变黑

        }else{

        }

        if(main[a].style.display='none'){  //如果当前元素是隐藏的

        main[a].style.display='block';  //那就让他变成块显示出来

        main[b].style.display='none';  //让他上一个兄弟隐藏

        }else{

        }

        },1000)

        */

//第二种

var nav = document.querySelectorAll('.nav li');

var main = document.querySelectorAll('.main li');

var a = 0;

setInterval(function() {

var i = a;

a++;

if(i == 3) {

a = 0;

}

console.log(i);

nav[i].style.background = 'red';

if(nav[i] != nav[0]) {

nav[i].previousElementSibling.style.background = '#000';

} else if(nav[i] == nav[0]) {

nav[3].style.background = '#000';

}

main[i].style.display = 'block';

if(main[i] != main[0]) {

main[i].previousElementSibling.style.display = 'none';

} else if(main[i] == main[0]) {

main[3].style.display = 'none';

}

}, 1000)