简单的选项卡

Posted 2020-10-11 small-trouble

效果图：

css代码：

*{
            padding:0px;
            margin: 0px;
            font:12px normal "microsoft yahei";
        }
        #tabs {
            width:300px;
            padding:5px;
            height:150px;
            margin:20px;
        }
        #tabs ul{
            list-style:none;
            display: block;
            height:30px;
            line-height:30px;
            border-bottom:2px #F11E1E solid;}
        #tabs ul li{
            background:#fff;
            cursor:pointer;
            float:left;
            list-style:none;
            height:28px;
            line-height:28px;
            margin:0px 3px;
            border:1px solid #F11E1E;
            border-bottom:none;
            display:inline-block;
            width:60px;
            text-align: center;
        }
        #tabs ul li.on{
            border-top:2px solid #F11E1E;
            border-bottom: 2px solid #fff;
    }
        #tabs div{
            height:200px;
            line-height: 25px;
            border:1px solid #F11E1E;
            border-top:none;
            padding:5px;
        }
        .hide{
            display: none;
            }

js代码：

 window.onload = function(){
             var oTab = document.getElementById("tabs");
             var oUl = oTab.getElementsByTagName("ul")[0];
             var oLis = oUl.getElementsByTagName("li");
             var oDivs= oTab.getElementsByTagName("div");

             for(var i= 0,len = oLis.length;i<len;i++){
                 oLis[i].index = i;
                 oLis[i].onclick = function() {
                     for(var n= 0;n<len;n++){
                         oLis[n].className = "";
                         oDivs[n].className = "hide";
                     }
                     this.className = "on";
                     oDivs[this.index].className = "";
                 }
             };
         }