JavaScript学习之选项卡

来源：互联网发布：长沙源码信息有限公司编辑：程序博客网时间：2024/06/05 04:20

选项卡

主体内容：

    <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>

阅读全文

0 0