JavaScript学习之选项卡

选项卡

主体内容：

    <div id="box">
        <ul>
            <li class="li">拨号</li>
            <li class="li">照片</li>
            <li class="li">信息</li>
            <li class="li">联系人</li>
        </ul>
        <div class="div">12345678</div>
        <div class="div"><img src="01.jpg"></div>
        <div class="div">通知信息</div>
        <div class="div">张三</div>
    </div>

css样式：

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            height: 60px;
        }

        li {
            width: 100px;
            height: 60px;
            list-style: none;
            line-height: 60px;
            text-align: center;
            float: left;
            border: 1px silver solid;
        }

        #box {
            margin: 0 auto;
            width: 410px;
            height: 310px;
            margin-top: 100px;
            position: relative;
        }

        .div {
            width: 406px;
            height: 200px;
            border: 1px silver solid;
            position: absolute;
            text-align: center;
            line-height: 200px;
            display: none;
        }
        img{
            width: 100px;
        }

        .active {
            background: red;
        }

js样式：

<script>
        var oli = document.getElementsByTagName("li");//获取标签为li的元素
        var odiv = document.getElementById("box").getElementsByTagName("div");//获取id为box的里边的标签为div的元素
        for(var i = 0; i < oli.length; i++) {
            oli[i].index = i;//index是自定义属性，相当于给oli的每一项定义了一个属性为i
            oli[0].className="active";//默认第一个li的class="active"
            odiv[0].style.display="block";";//默认第一个div显示出来

            oli[i].onclick = function() {//li点击事件
                //alert(1)
                for(var i = 0; i < oli.length; i++) {//循环清空li的样式并把div都隐藏
                    oli[i].className = '';
                    odiv[i].style.display = 'none';
                }
                this.className = "active"//点击的这个li的class="active"
                odiv[this.index].style.display = "block";//对应的此时的div显示出来

            }
        }
    </script>