选项卡嵌套

最新推荐文章于 2021-08-03 11:04:00 发布

玲娜贝儿827

最新推荐文章于 2021-08-03 11:04:00 发布

阅读量222

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/Steamgirl/article/details/104120110

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    //基本样式
       *{
           margin: 0;padding: 0;list-style: none;
       }
       #warp{
           width: 800px;
           border: 1px solid #000000;
           margin: 20px auto;
           background: blue;
           height: 362px;
       }
       #left_list{float: left;}
       #left_list li{
           width: 200px;
           height: 89px;
           background: red;
           margin-bottom: 2px;
           color: #fff;
           font:50px/89px "黑体";
           text-align: center;
       }
       #left_list .active{
           background:yellow;
           color:#000;
       }
       #right{float: left;}
       #right a{
           display: block;
           width: 600px;
           height: 322px;
           text-align: center;
           color: #000;
           font: 100px/322px "Microsoft YaHei";
           text-decoration: none;
           background: #0f0;
        }
        #right li {
            height: 40px;
            float: left;
            width: 148px;
            background: #909;
            text-align: center;
            font: 20px/40px "Microsoft YaHei";
            margin-right: 2px;
            color: #fff;
        }
        #right .active{
            background: #fff;
            color: #000;
        }
        #right div{
            display: none;
        }
    </style>
    
</head>
<body>
    <div id="warp">
        <ul id="left_list">
            <li class="active">a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
    <div id="right">
        <div class="right_box" style="display: block">
            <a href="#">a1</a>
            <ul>
                <li class="active">a1</li>
                <li>a2</li>
                <li>a3</li>
                <li>a4</li>
            </ul>
        </div>
        <div class="right_box">
            <a href="#">b1</a>
            <ul>
                <li class="active">b1</li>
                <li>b2</li>
                <li>b3</li>
                <li>b4</li>
            </ul>
        </div>
        <div class="right_box">
            <a href="#">c1</a>
            <ul>
                <li class="active">c1</li>
                <li>c2</li>
                <li>c3</li>
                <li>c4</li>
            </ul>
        </div>
         <div class="right_box">
            <a href="#">d1</a>
            <ul>
                <li class="active">d1</li>
                <li>d2</li>
                <li>d3</li>
                <li>d4</li>
            </ul>
        </div>
       
      
      
    </div>
    </div>
    <script>
        //1.获取元素
       var menuli =document.getElementById("left_list").getElementsByTagName("li");
       var oDiv =document.getElementById("right").getElementsByTagName("div");
      //2.滑过左边的li 显示对应的div
       for (var i=0;i<menuli.length;i++){
           menuli[i].index=i
           menuli[i].onmouseover = function(){
               //2.1改变滑过菜单样式
               for(var j =0; j<menuli.length;j++){
                     menuli[j].className="";
                     oDiv[j].style.display="none";
               }
               this.className="active";
               //2.2切换对应的div显示
               oDiv[this.index].style.display="block";
           }
       }
     change(oDiv[0]);
     change(oDiv[1]);
     change(oDiv[2]);
     change(oDiv[3]);
  //使用函数封装一个 其他的一模一样的直接调用即可
     function change(parent){
         var oa =parent.getElementsByTagName("a")[0];
         var oli=parent.getElementsByTagName("li");
         for(var i=0;i<oli.length;i++){
             oli[i].onmouseover = function(){
                for(var j=0; j<oli.length;j++){
                 oli[j].className="";
             }
             this.className ="active";
             oa.innerHTML = this.innerHTML;
         }
     }
 }
        
    
    </script>
</body>
</html>