码迷,mamicode.com
首页 > 其他好文 > 详细

简单的选项卡

时间:2017-10-22 01:33:54      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:nbsp   style   sof   list   otto   ima   odi   pointer   idt   

效果图:

技术分享

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 = "";
                 }
             };
         }

 

简单的选项卡

标签:nbsp   style   sof   list   otto   ima   odi   pointer   idt   

原文地址:http://www.cnblogs.com/zmx-xiao-xiao/p/7707439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!