利用JavaScript实现tab页面切换效果

听我对云说

已于 2023-03-29 22:59:50 修改

阅读量447

点赞数

文章标签： javascript html css

于 2023-03-29 22:34:26 首次发布

本文链接：https://blog.csdn.net/qq_68195068/article/details/129847113

版权

该文章展示了一段HTML和JavaScript代码，用于创建一组按钮，每个按钮代表一个页面。当用户点击任一按钮时，相应的内容会在页面上显示，其他内容隐藏。通过添加和移除CSS类，实现了按钮的激活状态以及页面内容的切换功能。

摘要由CSDN通过智能技术生成

效果如下：

<html>

<head>
    <style>
        ul input {
            font-size: 22px;
            height: 36px;
            border: 0px;
            outline: 0;
            text-align: center;
            display: block;
            padding: 10px;
            float: left;
        }

        .active {
            background-color: white;
        }

        .tab_main {
            display: none;
            height: 800px;
            width: 800px;
            background-color: aliceblue;
            text-align: center;
        }

        .clear {
            clear: both
        }
    </style>


</head>

<body>
    <div>
        <ul>
            <input type="button" value="页面一">
            <input type="button" value="页面二">
            <input type="button" value="页面三">
            <input type="button" value="页面四">
            <input type="button" value="页面五">
            <input type="button" value="页面六">
        </ul>
    </div>
    <div class="clear"></div>
    <!-- 用于清除之前设置的float属性 -->
    <div class="tab_main">页面一</div>
    <div class="tab_main">页面二</div>
    <div class="tab_main">页面三</div>
    <div class="tab_main">页面四</div>
    <div class="tab_main">页面五</div>
    <div class="tab_main">页面六</div>


</body>
<script>
    window.onload = function () {
        var inputarr = document.getElementsByTagName("input");//将所有input生成为一个集合
        var divarr = document.getElementsByClassName("tab_main");//将所有类名为tab_main的元素生成为一个集合
        for (var i = 0; i < inputarr.length; i++) { // 获取按钮数组的下标 
            inputarr[i].index = i; // 点击按钮触发 
            inputarr[i].onclick = function () {
                for (var
                    j = 0; j < inputarr.length; j++) {
                    inputarr[j].className = ""; //清空active类 
                } // 将所有div设置为不显示 
                for (var
                    k = 0; k < divarr.length; k++) { divarr[k].style.display = "none"; } //将点击的按钮设置为active类
                inputarr[this.index].className = "active"; //将点击的按钮对应的div显示 
                divarr[this.index].style.display = "block";
            }
        }
    }
</script>

</html>

参考博客：原生js之table切换_jstable的切换_蛞蝓不孤寡的博客-CSDN博客