选项卡js

趁着公司不忙，抓紧充充电，开始可能会写的不好，但是每写一个都是一点进步，哈哈，加油

用js实现选项卡切换

1.获取元素

2.初始状态

3.通过循环清空元素状态

4.点击操作以及对应的内容切换

5.自定义索引（通过HTML加进去的自定义属性，部分浏览器不支持，必须通过js添加）

html代码：

<body>
    <ul id="list" class="clearFix">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ul>
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
</body>

css代码：

<link rel="stylesheet" type="text/css" href="css/public.css"/>
    <style type="text/css">
        #list li{float:left;width: 100px;height: 40px;line-height: 40px;text-align: center;background: #dbdbdb;cursor: pointer;}
        #list li.light{background: #45B035;color: #fff;}
        div{width: 400px;height: 400px;line-height: 400px;text-align: center;background: #999;display: none;}
    </style>

js代码：

<script type="text/javascript">
        window.onload=function(){
            var oList=document.getElementById("list");
            var aLi=oList.getElementsByTagName("li");
            var aDiv=document.getElementsByTagName("div");
            aLi[0].className="light";
            aDiv[0].style.display="block";
            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].onclick=function(){
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].className="";
                        aDiv[i].style.display="none";
                    }
                    this.className="light";
                    aDiv[this.index].style.display="block";
            }
        }
}

效果：

 

posted @ 2016-07-15 09:48  rain92  阅读(203)  评论(0)  编辑  收藏  举报