tab切换选项卡

最新推荐文章于 2024-09-22 14:11:19 发布

H_c_l

最新推荐文章于 2024-09-22 14:11:19 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html tab切换

本文链接：https://blog.youkuaiyun.com/H_c_l/article/details/90055163

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的Tab切换效果，通过简单的CSS样式和JavaScript函数，可以实现在不同内容块之间的平滑切换。此方法适用于创建响应式网页设计中的导航菜单，提高用户体验。

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }
ul{
    display: flex;
    text-align: center;

}
        li {
            list-style: none;
            white-space: 20px;
            margin: 20px;
        }
        
    </style>
    <script>
        function tab(pid) {
            var tabs = ["tab1", "tab2", "tab3", "tab4"];
            for (var i = 0; i < 4; i++) {
                if (tabs[i] == pid) {
                    document.getElementById(tabs[i]).style.display = "block";
                } else {
                    document.getElementById(tabs[i]).style.display = "none";
                }
            }
        }
    </script>
</head>

<body>
    <div id="tanContainer">
        <div id="tabNav">
            <ul>
                <li onclick="tab('tab1')">标题一</li>
                <li onclick="tab('tab2')">标题二</li>
                <li onclick="tab('tab3')">标题三</li>
                <li onclick="tab('tab4')">标题四</li>
            </ul>
        </div>
        <div id="tab">
            <div id="tab1">内容一</div>
            <div id="tab2">内容二</div>
            <div id="tab3">内容三</div>
            <div id="tab4">内容四</div>
        </div>
    </div>
</body>

</html>

在这里插入图片描述