编程练习5-原生JS实现选项卡功能-原创手记-慕课网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编程练习5-原生JS实现选项卡功能</title>
    <style type="text/css">
         *{
            font:12px normal "microsoft yahei";
         }
         ul{
            margin: 0;
            padding: 0;
            border-bottom:2px solid #8B4513;
            width:300px;    
            height: 32px;
         }
         li{
            list-style-type: none;
            height: 30px;
            line-height: 30px;
            margin-left: 5px; 
         }
         /*头部按钮选择
         border-bottom:2px solid #FFFFFF!important;
         1、增加border-bottom是为了覆盖父容器ul的下边框：li的下边框是能够覆盖ui的下边框区域的
         2、!important是为了提高css的优先级，发现.active优先级不如li[name="tabs"]
         */
         .active{
            border-top:2px solid #8B4513!important;
            border-bottom:2px solid #FFFFFF!important;
        }
        /*标签头部按钮样式*/
        li[name="tabs"]{
            width: 60px;
            border: 1px solid #999;
            cursor: pointer;
            float:left;
            text-align: center; 
        }
        /*内容区域显示*/
        .show{
            display: block;
        }
        /*内容区域隐藏*/
        .hide{
            display: none;
        }
        /*内容区域默认样式*/
        .content{
            border:1px solid #4A78A6;
            border-top: none;
            width: 298px;
            height: 150px;
        }

    </style>
    <script type="text/javascript">
        window.onload = function(){     
             var tabs = document.getElementsByName("tabs");
             var contents = document.getElementsByName("content");
             for (var i = 0,len=tabs.length;i < len; i++) {
                tabs[i].index = i;//注意这一句，这个i是不能正确传递到onclick里面的，原因？？？，所以将它附加给tabs[i]对象
                tabs[i].onclick = function(){
                    for (var j = 0; j < len; j++) {
                        tabs[j].className = "";
                        contents[j].className = "hide";
                    }
                    this.className="active";
                    contents[this.index].className="show content";
                }
             }
         }
    </script>
</head>
<body>
    <ul>
        <li name="tabs" class="active">房产</li>
        <li name="tabs">家具</li>
        <li name="tabs">二手房</li>
    </ul>
    <ul name="content" class="show content">
        <li name="contentLi">275万购昌平邻铁三居 总价20万买一居</li>
        <li name="contentLi">200万内购五环三居 140万安家东三环</li>
        <li name="contentLi">北京首现零首付楼盘 53万购东5环50平</li>
        <li name="contentLi">京楼盘直降5000 中信府 公园楼王现房</li>
    </ul>
    <ul name="content" class="hide content">
        <li name="contentLi">40平出租屋大改造 美少女的混搭小窝</li>
        <li name="contentLi">经典清新简欧爱家 90平老房焕发新生</li>
        <li name="contentLi">新中式的酷色温情 66平撞色活泼家居</li>
        <li name="contentLi">瓷砖就像选好老婆 卫生间烟道的设计</li>
    </ul>
    <ul name="content" class="hide content">
        <li name="contentLi">通州豪华3居260万 二环稀缺2居250w甩</li>
        <li name="contentLi">西3环通透2居290万 130万2居限量抢购</li>
        <li name="contentLi">黄城根小学学区仅260万 121平70万抛!</li>
        <li name="contentLi">独家别墅280万 苏州桥2居优惠价248万</li>
    </ul>
</body>
</html>
编程练习5-原生JS实现选项卡功能原创
