网页tab键的实现

更新日期: 2019-11-17阅读: 2k标签: 网页分享

复制链接

新浪微博

QQ 好友

扫一扫分享

前端常用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://www.fly63.com/article/detial/6896

网页tab键的实现

网页中文本朗读功能开发实现分享

网页开发中利用CSS以图换字的多中实现方法总汇

如何嵌套一个网页html到另一个html中

网站开发需要哪些知识_网页开发你需要知道的6件事

理解大型分布式网站你必须知道这些概念

网页后缀html、htm、shtml、shtm有什么区别？

html网页自动跳转方法_整理网页自动跳转的5种方法

html页面锚点链接对SEO的作用，以及实现描点的三种方式

使用 BeautifulSoup 和 Selenium 进行网页爬取

实现主机访问虚拟机网页的方法总结