TOP切换效果

body主体内容：

 

 

css样式：

@charset "utf-8";

/* CSS Document */

/* ex6_2.css*/

*{

    margin: 0px;

    padding: 0px;

    list-style: none;

}

#container{

    width: 290px;

    height: 194px;

    border: 1px solid #E7E5E4;

    margin:0 auto;

}

.top{

    height: 33px;

    background-color: #F7F5F4;

    border: 1px solid #E4E4E4;

}

.top ul{

    list-style: none;

}

.top ul li{

    display: block;

    float: left;

    height: 22px;

    line-height: 22px;

    margin-top: 8px;

    padding-left: 15px;

    padding-right: 15px;

    color: #666666;

    cursor: pointer;

}

.top ul li.over{

    border: 1px solid #E4E4E4;

    border-top: 2px solid #ff0000;

    color: #000000;

}

.top ul li.out{

    border: 0;

    color: #666666;

}

.bottom{

    padding: 5px;

}

.one{

    width: 100%;

    display: inline-block;

   

}

.one>ol>li{

    float: left;

    margin-left: 5px;

}

.cp{

    width: 22px;

    height: 22px;

    background-color: #ff0000;

    border-radius: 50%;

    display: block;

    float: left;

    margin-left: 5px;

}

.up{

    width: 100%;

    height: auto;

}

table{

    line-height: 35px

}

.an{

    background-color:coral;

    color:#fff ;

    border: none;

    width: 70px;

    height: 30px;

    line-height: 30px;

}

.zh{

    font-size: 13px;

    line-height: 13px;

    color: darkgrey;

}

.dy{

    font-size: 13px;

    line-height: 24px;

}

.xy{

    text-align: center;

}

 .mian{

    width: 290px;

    display: none;

    height: auto;

}

JavaScript内容 ：

 <script>

        window.οnlοad=function(){

            var lis=document.querySelectorAll(".item");//获取所有item对象

            var main=document.querySelectorAll(".mian");

        for (var i = 0; i < lis.length; i++){

            lis[i].index=i;

            lis[i].onclick = function () {

                for (var i = 0; i < lis.length; i++) {

                    lis[i].className = '';//将li内所有的样式设置为空

                }

                this.className = 'over';//将当前点击的样式设置为over

                for (var j = 0; j < main.length; j++){

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

                }

               main[this.index].style.display = 'block';

            }

        }  

    }  

    </script>

最终效果图