javascript选项卡嵌套的实现

    xiaoxiao2022-07-07  179

    标题

    <style> *{margin: 0px;padding: 0px;list-style: none;text-decoration: none;} .box{width: 800px;border: 1px solid #000000;margin: 20px auto;background: blue;} .box:after{content: "";display: block;clear: both; } #leftBox{float: left} #rightBox{float: left;} #leftBox li {width: 200px;height: 89px;background: red;margin-bottom: 2px;color: #fff;font:50px/89px "黑体";text-align: center;} #rightBox div{display: none;} #rightBox .active{display: block;} #rightBox a{display: block;width: 600px;height: 325px;background:#0F0;font-size:100px;color:#000;text-align:center;text-decoration:none;line-height:360px;en;} .tabUl {display:table;width:100%;} .tabUl li{display:table-cell;background:#909;color:#fff;font-size:20px;text-align:center;height:40px;line-height:40px;border-right:2px solid #03C;cursor:pointer;} .tabUl li.hover{background:#fff;color:#000;} #leftBox .active{ background: yellow;color: #000; } </style> <script> window.onload = function () { //1.获取元素 var leftLi = document.getElementById("leftBox").getElementsByTagName("li"); var rightDiv = document.getElementById("rightBox").getElementsByTagName("div"); //2.划过li,改li自己的样式,切换对应的div for(var i = 0;i<leftLi.length;i++){ leftLi[i].index = i; //存储li的下标 leftLi[i].onmouseover = function () { //改li自己的样式 for(var j = 0;j<leftLi.length;j++){ leftLi[j].className = ""; rightDiv[j].className = ""; } this.className = "active"; //切换对应的div rightDiv[this.index].className = "active"; } } tabSwitch(rightDiv[0]); tabSwitch(rightDiv[1]); tabSwitch(rightDiv[2]); tabSwitch(rightDiv[3]); function tabSwitch(parent) { //3.使用父元素获取元素,先实现一个 var rightLi =parent.getElementsByTagName("li");//每一个菜单选项 var rightA = parent.getElementsByTagName("a")[0]; //给li添加划过事件 for(var i= 0;i<rightLi.length;i++){ rightLi[i].onmouseover= function () { //改自己的,换上面的文字 for(var j = 0;j<rightLi.length;j++){ rightLi[j].className = ""; } this.className = "hover"; rightA.innerHTML = this.innerHTML; } } } } </script> <body> <!--tab选项卡嵌套--> <!--1、先实现一个不是嵌套的选项卡--> <!--2、又在每一个内容区域中 再实现多一个tab选项卡--> <!--3、如果各个内容中嵌套的tab选项卡的菜单个数不一样的话 也是可以使用for循环添加事件 因为每次所拿到getElementsByTagName是数组来的 for i<数组的长度 --> <div class="box" id="box"> <ul id="leftBox" > <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> <div id="rightBox"> <div id="rightBox1" class="active"> <a href="#">a1</a> <ul class="tabUl"> <li class="hover">a1</li> <li>a2</li> <li>a3</li> <li>a4</li> </ul> </div> <div id="rightBox2"> <a href="#">b1</a> <ul class="tabUl"> <li class="hover">b1</li> <li>b2</li> <li>b3</li> <li>b4</li> </ul> </div> <div id="rightBox3"> <a href="#">c1</a> <ul class="tabUl"> <li class="hover">c1</li> <li>c2</li> <li>c3</li> <li>c4</li> <li>c5</li> <li>c6</li> </ul> </div> <div id="rightBox4"> <a href="#">d1</a> <ul class="tabUl"> <li class="hover">d1</li> <li>d2</li> <li>d3</li> <li>d4</li> </ul> </div> </div> </div> </body>

    效果图

    最新回复(0)