使用JS实现简单的选项卡功能_js实现选项卡-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41148850/article/details/81773463

本文介绍如何使用HTML、CSS和JavaScript创建一个简单的选项卡效果。通过设置导航栏和内容区域的HTML结构，配合CSS进行样式调整，并利用JavaScript实现选项卡切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们来写HTML代码，构建出整体结构

代码如下：

<!--导航栏部分HTML代码-->
<nav id="nav">
    <ul>
        <li class="act">选卡1</li>
        <li>选卡2</li>
        <li>选卡3</li>
        <li>选卡4</li>
    </ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
    <section class="tab" style="background-color: tomato">内容1</section>
    <section class="tab" style="background-color: cyan">内容2</section>
    <section class="tab" style="background-color: blueviolet">内容3</section>
    <section class="tab" style="background-color: gold">内容4</section>
</div>

注：section 部分添加了style，目的是方便演示，为规范HTML与css的代码风格，不推荐这样使用。

接着我们使用css代码构建出样式

代码如下：

       *{
            text-align: center;
        }
        nav li{
            display: inline;
            width: 24%;
            text-decoration: none;
            padding: 15px;
        }
        li:hover{
            background-color: lightblue;
        }
        section{
            height: 300px;
        }

最后是js的代码，实现选项卡功能

代码如下：

window.onload=function () {
  //获取 li 也就是选项卡选项tab
        var nav=document.getElementById('nav');
        var oNav=nav.getElementsByTagName('li');
  //获取 包裹在container里面的section（内容）
        var container=document.getElementById('container');
        var oDiv=container.getElementsByClassName('tab');
  //使用 循环依次得到li      
        for(var i=0;i<oNav.length;i++){
            oNav[i].index=i;
  //每一次得到li后执行鼠标点击操作则触发函数function          
            oNav[i].onclick=function () {  //此处除了可以使用onclick，还可以使用onmouseover
  //在li的个数内依次展示内容          
                for(var i=0;i<oNav.length;i++){
                    oNav[i].className='';
                    oDiv[i].style.display="none";
                }
                this.className='act';
                oDiv[this.index].style.display="block"
            }
            for(var m=1;m<oNav.length;m++){
                    oNav[m].className='';
                    oDiv[m].style.display="none";
                }
        }
    };

此上就是用js实现简单选项卡的全部内容，下面是整个代码，复制粘贴到编译器即可运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            text-align: center;
        }
        nav li{
            display: inline;
            width: 24%;
            text-decoration: none;
            padding: 15px;
        }
        li:hover{
            background-color: lightblue;
        }
        section{
            height: 300px;
        }
    </style>
</head>
<body>
<!--导航栏部分HTML代码-->
<nav id="nav">
    <ul>
        <li class="act">选卡1</li>
        <li>选卡2</li>
        <li>选卡3</li>
        <li>选卡4</li>
    </ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
    <section class="tab" style="background-color: tomato">内容1</section>
    <section class="tab" style="background-color: cyan">内容2</section>
    <section class="tab" style="background-color: blueviolet">内容3</section>
    <section class="tab" style="background-color: gold">内容4</section>
</div>
<script>
    window.onload=function () {
        var nav=document.getElementById('nav');
        var oNav=nav.getElementsByTagName('li');

        var container=document.getElementById('container');
        var oDiv=container.getElementsByClassName('tab');
        for(var i=0;i<oNav.length;i++){
            oNav[i].index=i;
            oNav[i].onclick=function () {
                for(var i=0;i<oNav.length;i++){
                    oNav[i].className='';
                    oDiv[i].style.display="none";
                }
                this.className='act';
                oDiv[this.index].style.display="block"
            }
            for(var m=1;m<oNav.length;m++){
                    oNav[m].className='';
                    oDiv[m].style.display="none";
                }
        }
    };
</script>
</body>
</html>