原理分析：
首先是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);
    }
 }