js_day02_js实现选项卡功能

原理分析：
首先是html的布局方式：nav的ul中的某一个li要设置class高亮，con的ul的li要设置style=”display:block;”,css样式要设置display为none
其次，最重要的js部分来了：
1.要对li设置点击事件就要先遍历nav的每一个li,用for
2.导航nav和内容con的关联就要用到自定义的index
3.写onclick事件
4.一点击的时候使当前点击的li高亮，为了解决所有都高亮这个bug则要for遍历清空除当前点击外的所有li的高亮
5.内容的连接也一样，conlist[this.index]中的this.index找到的就是内容和nav的索引，也要解决类似高亮的bug**

结构部分：
<div>
    <ul id="nav">
        <li class="active">首页</li>
        <li>男士</li>
        <li>女士</li>
        <li>家庭用品</li>
        <li>电器</li>
    </ul>
    <ul id="content">
        <li style="display: block">欢迎来到首页</li>
        <li>男士鞋子、衣服、包包等</li>
        <li>裙子、口红、高跟鞋</li>
        <li>纸巾、筷子、塑胶袋</li>
        <li>洗衣机、电风扇、电磁炉等</li>
    </ul>
</div>

css样式部分：
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 530px;
            height: 500px;
            margin: 100px auto;
            text-align: center;
        }
        #nav{
            width: 100%;
            height: 50px;
            list-style: none;
        }
        #nav li{
            width: 100px;
            line-height: 50px;
            background: skyblue;
            float: left;
            margin:0 0 0 5px;
        }
        #content{
            list-style: none;
            height: 450px;
            background:pink;
            width:520px;
            margin:0 auto;
        }
        #content li{
            display: none;
            line-height: 450px;
        }
        #nav .active{
            background: orange;
        }
    </style>

js实现选项卡部分：
<script>
    var nav=document.getElementById('nav');
    var navlist=nav.getElementsByTagName('li');
    var con=document.getElementById('content');
    var conlist=con.children;
    for (var j=0;j<navlist.length;j++){
        navlist[j].index=j;
        navlist[j].onclick=function(){
//            alert(1);
        for (var i=0;i<conlist.length;i++){
            navlist[i].className="";
            navlist[i].style.color="";
            conlist[i].style.display='none';
        }
        this.className='active';
        this.style.color='#fff';
        conlist[this.index].style.display='block'
        }
    }
</script>



为了以后使用方便，可封装js部分：

function change(navid,conid){
    var nav = document.getElementById(navid);
    var navlist = nav.getElementsByTagName("li");
    var con = document.getElementById(conid);
    var conlist = con.getElementsByTagName("li");
    for (i=0;i<navlist.length;i++){
        navlist[i].onclick = function (i){
            return function (){
                for (m = 0;m<conlist.length;m++){
                    navlist[m].className ="";
                    conlist[m].style.display = "none";
                }
                this.className = "active";
                conlist[i].style.display = "block";
            }
        }(i);
    }
 }

js选项卡功能实现参考原文地址