网页tab键的实现

摘要：前端常用tab键的实现，用到的原理是当点击一个元素时，通过javascript操作css的display属性，达到控制另一个元素的显示(display: block)与不显示(display: none)，需要注意的是，由于使用的是onclick事件

前端常用tab键的实现，用到的原理是当点击一个元素时，通过javascript操作css的display属性，达到控制另一个元素的显示(display: block)与不显示(display: none)

需要注意的是，由于使用的是onclick事件，该事件点击后会导致刷新，从而将原本应该从点击事件中获得显示的元素重置，回到初始隐藏状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test tabs 04</title>
    <style type="text/css">
        a {
            text-decoration: none;
        }
        #content01 {
            display:none;
        }
        #content02 {
            display: none;
        }
        .tab_Btn {
            display: inline-block;
            width: 100px;
            height: 40px;
            color: black;
            background: orange;
            padding-top: 5px;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>
        <a class="tab_Btn" href="" onclick="showTabs(tab01);return false;">Tab1</a>
        <a class="tab_Btn" href="" onclick="showTabs(tab02);return false;">Tab2</a>
        <!-- 需要加return false 否则onclick事件会自动刷新 content又会默认置为display:none -->
    </div>
    <!-- content内容为默认隐藏的内容 -->
    <div class="content" id="content01">
        <p>Tab1 content</p>
    </div>
    <div class="content" id="content02">
        <p>Tab2 content</p>
    </div>
    <script type="text/javascript">
        var tab01 = document.getElementById("content01");
        var tab02 = document.getElementById("content02");
        //console.log(tab01);

        function showTabs(tab) {
            if (tab01 == tab){
                tab01.style.display = "block";
                tab02.style.display = "none";
            }
            else{
                tab02.style.display = "block";
                tab01.style.display = "none";
            }
        }
    </script>
</body>
</html>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6896