js选项卡效果

最新推荐文章于 2023-08-29 19:23:55 发布

Hermia_yuan

最新推荐文章于 2023-08-29 19:23:55 发布

阅读量965

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Hermia_yuan/article/details/123781509

版权

documentAPI：

getElementById() 返回具有指定 ID 属性值的第一个对象的一个引用

getElementsByTagName 返回带有指定标签名的对象的集合, 返回元素的顺序是它们在文档中的顺序。

getElementsByclassName 属性设置或返回元素的 class 属性

<body>
        <!--导航栏部分HTML代码-->
        <div class="box">
            <nav id="nav">
                <ul>
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li><a href="#">d</a></li>
                </ul>
            </nav>
        <!--内容部分HTML代码-->
            <div id="container">
                <div class="tab" style="background-color: pink;">a部分 可根据自己的需要设置内容</div>
                <div class="tab" style="background-color: cadetblue;">b部分</div>
                <div class="tab" style="background-color: blueviolet;">c部分</div>
                <div class="tab" style="background-color: chartreuse;">d部分</div>
            </div>
        </div>
</body>

   <style>
            *{
                padding: 0;
                margin: 0;
                text-decoration: none;
            }
            .box{
                position: relative;
            }
            #nav ul{
                width: 360px;
                height: 36px;
                display: flex;
                flex-direction: row;
                margin: auto;
                background-color: rgb(231, 231, 231);
            }
            #nav ul li{
                width: 58px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                list-style: none;
            }
            #nav ul li:hover{
                background-color: white;
                border-top: yellow 2px solid;
                box-sizing: border-box;
            }
            #nav ul li a{
                color: black;
            }
            #container{
                width: 360px;
                margin: auto ;
                background-color: white;
            }
            .tab{
                width: 360px;
                height: 300px;
            }
        </style>

    <script>
         var nav=document.getElementById('nav');   //返回导航栏
         console.log(nav);                         //测试
         var oNav=nav.getElementsByTagName('li');  
         console.log(oNav);                        
         var container=document.getElementById('container');
         var oDiv=container.getElementsByClassName('tab');
        //  console.log(oDiv);
        //设置条件
         for(var i=0;i<oNav.length;i++){   
             
            //index 属性可返回下拉列表中选项的索引位置
             oNav[i].index=i;
             oNav[i].onmouseover=function () {    //鼠标移入效果
                 for(var i=0;i<oNav.length;i++){
                   
                     oDiv[i].style.display="none";
                 }
              
                 oDiv[this.index].style.display="block"
             }
             for(var m=1;m<oNav.length;m++){
                  
                     oDiv[m].style.display="none";
             }
         }
    </script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡效果</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                text-decoration: none;
            }
            .box{
                position: relative;
            }
            #nav ul{
                width: 360px;
                height: 36px;
                display: flex;
                flex-direction: row;
                margin: auto;
                background-color: rgb(231, 231, 231);
            }
            #nav ul li{
                width: 58px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                list-style: none;
            }
            #nav ul li:hover{
                background-color: white;
                border-top: yellow 2px solid;
                box-sizing: border-box;
            }
            #nav ul li a{
                color: black;
            }
            #container{
                width: 360px;
                margin: auto ;
                background-color: white;
            }
            .tab{
                width: 360px;
                height: 300px;
            }
        </style>
</head>
    <body>
            <!--导航栏部分HTML代码-->
            <div class="box">
                <nav id="nav">
                    <ul>
                        <li><a href="#">a</a></li>
                        <li><a href="#">b</a></li>
                        <li><a href="#">c</a></li>
                        <li><a href="#">d</a></li>
                    </ul>
                </nav>
            <!--内容部分HTML代码-->
                <div id="container">
                    <div class="tab" style="background-color: pink;">a部分 可根据自己的需要设置内容</div>
                    <div class="tab" style="background-color: cadetblue;">b部分</div>
                    <div class="tab" style="background-color: blueviolet;">c部分</div>
                    <div class="tab" style="background-color: chartreuse;">d部分</div>
                </div>
            </div>
    </body>
    <script>
         var nav=document.getElementById('nav');   //返回导航栏
         console.log(nav);                         //测试
         var oNav=nav.getElementsByTagName('li');  
         console.log(oNav);                        
         var container=document.getElementById('container');
         var oDiv=container.getElementsByClassName('tab');
        //  console.log(oDiv);
        //设置条件
         for(var i=0;i<oNav.length;i++){   
             
            //index 属性可返回下拉列表中选项的索引位置
             oNav[i].index=i;
             oNav[i].onmouseover=function () {    //鼠标移入效果
                 for(var i=0;i<oNav.length;i++){
                   
                     oDiv[i].style.display="none";
                 }
              
                 oDiv[this.index].style.display="block"
             }
             for(var m=1;m<oNav.length;m++){
                  
                     oDiv[m].style.display="none";
             }
         }
    </script>
</html>

效果图

Hermia_yuan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js选项卡效果

documentAPI：getElementById() 返回具有指定 ID 属性值的第一个对象的一个引用getElementsByTagName 返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序。getElementsByclassName属性设置或返回元素的 class 属性<body>  <div class="box"> &lt...
复制链接

扫一扫