原生JS写Tab切换_js原生tab动态怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/HaiJun_Aion/article/details/82082668

作者作为前端菜鸟，分享Tab切换代码。该代码使用静态数据，点击标签显示对应内容。思路为写好静态页面，获取Tab标签和内容li伪数组，遍历Tab伪数组存入索引值，通过onmouseover事件设置Tab和li属性。

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

						## 原生JS实现Tab切换 ##

本人是前端菜鸟一枚，喜欢钻研前端，前端的可视化界面带来的舒适，即可编写就可以看到效果界面，成就感满满！
这里写图片描述
废话不多说，开始撸代码！

这里写代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #outer{
        width: 450px;
        margin: 10px auto;
    }
    #tab{
        overflow: hidden;
        zoom:1;
        background: #000;
        border:1px solid #000;
    }
    #tab li{
        float:left;
        color:#fff;
        height:30px;
        cursor:pointer;
        line-height:30px;
        list-style-type:none;
        padding:0 20px;
    }
    #tab li.current{
        color:#000;
        background:#ccc;
    }
    #content{
        border:1px solid #000;
        border-top-width:0;
    }
    #content ul{
        line-height:25px;
        display:none;
        margin:0 30px;
        padding:10px 0;
    }
    </style>
    <script>
    window.onload=function(){
       var tab = document.getElementById("tab").getElementsByTagName("li");
       var content = document.getElementById("content").getElementsByTagName("ul");
       for(var i = 0; i<tab.length;i++){
           tab[i].index=i;
           tab[i].onmouseover=function(){
                for(var n = 0; n<tab.length;n++){
                    tab[n].className="";
                    this.className="current";
                }
                for(var n = 0;n<content.length;n++){
                    content[n].style.display = "none";
                    content[this.index].style.display="block"
                }
           }
       }
    }
    </script>
</head>
<body>
    <div id="outer">
        <ul id="tab">
            <li class="current">第一课</li>
            <li>第二课</li>
            <li>第三课</li>
        </ul>
        <div id="content">
            <ul style="display: block;">
                <li>网页特效原理分析</li>
                <li>响应用户操作</li>
                <li>提示框效果</li>
                <li>事件驱动</li>
                <li>元素属性操作</li>
            </ul>
            <ul>
                    <li>网ddddddddd</li>
                    <li>响应用户操作</li>
                    <li>提示框效果</li>
                    <li>事件驱动</li>
                    <li>元素属性操作</li>
                    <li>网ddddddddd</li>
                    <li>响应用户操作</li>
                    <li>提示框效果</li>
                    <li>事件驱动</li>
                    <li>元素属性操作</li>
            </ul> 
            <ul>
                    <li>AAAAAAAAAAAAA</li>
                    <li>响应用户操作</li>
                    <li>提示框效果</li>
                    <li>事件驱动</li>
                    <li>元素属性操作</li>
            </ul>
        </div>  
    </div>
</body>
</html>