tab切换选项卡

最新推荐文章于 2023-08-25 13:32:54 发布

H_c_l

最新推荐文章于 2023-08-25 13:32:54 发布

阅读量255

点赞数

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

本文链接：https://blog.csdn.net/H_c_l/article/details/90055163

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>