js选项卡效果

js选项卡效果

全栈程序员-站长 • 2025年8月24日上午11:15 • 未分类 • 阅读 3

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>

效果图

js选项卡效果