javascript选项卡嵌套的实现

最新推荐文章于 2023-02-06 19:42:02 发布

大可&不必

最新推荐文章于 2023-02-06 19:42:02 发布

阅读量1.4k

点赞数 1

文章标签： javascript选项卡嵌套的实现

本文链接：https://blog.csdn.net/style201904/article/details/90451969

版权

标题

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

效果图
在这里插入图片描述

大可&不必

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javascript选项卡嵌套的实现

标题<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...
复制链接

扫一扫