原生js写tab栏

最新推荐文章于 2024-06-17 12:52:12 发布

原创最新推荐文章于 2024-06-17 12:52:12 发布 · 559 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#原生js写简易tab栏

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的简单网页选项卡切换效果。通过鼠标悬停事件触发不同内容块的显示与隐藏，实现了新闻、体育、娱乐和八卦四个模块的内容动态展示。此案例适用于初学者理解DOM操作及网页交互设计的基本原理。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        .box {
            width: 350px;
            height: 300px;
            border:1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .mt span {
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: pink;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .mt span.current {
            background-color: purple;
        }
        .mb li {
            width: 100%;
            height: 270px;
            background-color: purple;
            display: none;
        }
        .mb li.show {
            display: block;
        }
    </style>
    <script>
       window.onload = function(){
        function fn(){
                var spans = document.getElementsByTagName("span");
                var lis = document.getElementsByTagName("li");
               var timer = null;
                for(var i=0;i<spans.length;i++){
                    spans[i].onmouseover = function(num){
                        return function(){
                           timer = setInterval(function () {
                                for(var i=0;i<spans.length;i++){
                                    spans[i].className = "";
                                    lis[i].className = "";
                                }
                                spans[num].className = "current";
                                lis[num].className = "show"
                            },500)

                        }
                    }(i) ;
                    spans[i].onmouseout = function () {
                        clearInterval(timer)
                    }
                }
        }
        fn();
        }
    </script>
</head>
<body>
<div class="box" id="one">
    <div class="mt">
        <span class="current">新闻</span>
        <span>体育</span>
        <span>娱乐</span>
        <span>八卦</span>
    </div>
    <div class="mb">
        <ul>
            <li class="show">新闻模块新闻模块新闻模块新闻模块新闻模块</li>
            <li>体育模块体育模块体育模块体育模块体育模块</li>
            <li>娱乐模块娱乐模块娱乐模块娱乐模块娱乐模块</li>
            <li>八卦模块八卦模块八卦模块八卦模块八卦模块</li>
        </ul>
    </div>
</div>
</body>
</html>