javascript选项卡嵌套的实现

╰半夏微凉° 2022-01-28 00:55 267阅读 0赞

## 标题 ##

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

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220128/4ca58d316315419c947f84c73fa55339.png

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript编程实现tab选项卡切换的效果

在编写“圳品”信息系统中，需要显示的内容较多，从上到下列出来的话看起来比较累，所以我们要将显示的内容分成若干类别并分别显示，这样就需要tab选项卡。用JavaScript编

r囧r小猫/ 2024年03月24日 15:34/ 0 赞/ 49 阅读

相关 JavaScript编程实现tab选项卡切换的效果+1

之前在“圳品”信息系统使用了tab选项卡来显示信息，详见： [JavaScript编程实现tab选项卡切换的效果][JavaScript_tab] 在tab选项卡中使用其它

ゞ浴缸里的玫瑰/ 2024年03月23日 10:02/ 0 赞/ 91 阅读

相关 layui选项卡的实现

目录前言模块加载名称： element一、element组件 1. element基础方法 2. 优化前端JSP页面 3. 引入头部hand.jsp页面 4.

秒速五厘米/ 2024年03月17日 19:24/ 0 赞/ 35 阅读

相关 32、JavaScript中选项卡的实现

1、CSS代码 <style> div1 input { background: CCC; }

ゝ一纸荒年。/ 2022年09月21日 11:51/ 0 赞/ 151 阅读

相关 jQuery实现选项卡嵌套

描述： 1.划上底部a的每一个菜单让顶部的标签span的内容变成对应的a的内容 2.划上左边的li 切换到右侧对应的div

落日映苍穹つ/ 2022年09月10日 10:24/ 0 赞/ 189 阅读

相关 jq实现的选项卡

效果图： ![这里写图片描述][SouthEast] 代码如下： <!DOCTYPE html> <html lang="en"> <head>

偏执的太偏执、/ 2022年05月31日 04:08/ 0 赞/ 179 阅读

相关 javascript选项卡功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

系统管理员/ 2022年05月12日 02:44/ 0 赞/ 217 阅读

相关 javascript选项卡嵌套的实现

标题 <style> {margin: 0px;padding: 0px;list-style: none;text-decoration

╰半夏微凉°/ 2022年01月28日 00:55/ 0 赞/ 268 阅读

相关 javascript,tab选项卡的实现和应用案例

选项卡案例 <style type="text/css"> .btnBox,.contentBox{ display: none;

迷南。/ 2022年01月22日 23:25/ 0 赞/ 229 阅读

相关 javascript 简易选项卡

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年11月23日 00:08/ 0 赞/ 298 阅读