javascript代码实现选项卡（14行js代码）

最新推荐文章于 2023-07-01 18:20:34 发布

十九万里

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量607

点赞数 4

分类专栏： javascript、jquery 文章标签： HTML CSS JavaScript 选项卡动态效果

本文链接：https://blog.csdn.net/weixin_44865458/article/details/115413725

版权

javascript、jquery 专栏收录该内容

40 篇文章 6 订阅

订阅专栏

一html部分

<div id="main">
        <!-- active是默认选中的div  -->
        <button class="active">11</button>
        <button>22</button>
        <button>33</button>
        <!-- 三个div在css中都设置为none 这里的display：block是默认选中的div  -->
        <div style="display: block;" class="content">11</div>
        <div class="content">22</div>
        <div class="content">33</div>
    </div>

二css部分

<style>
        /* 加一些样式，让他变得更好看 */
        #main {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            margin-top: 40px;

        }

        div button {
            width: 200px;
            height: 100px;
            margin-left: 30px;
        }

        #main div {
            height: 200px;
            width: 600px;
            margin-top: 50px;
            border: 2px solid rgb(27, 26, 26);
            margin-left: 60px;
            font-size: 50px;
            text-align: center;
            /* 默认没有选中的div隐藏 */
            display: none;
        }

        /* 设置点击按钮时按钮改变颜色 */
        .active {
            background-color: rgb(50, 202, 223);

        }
    </style>

三 js部分

<script type="text/javascript">
    // 先获取到button和content，后面才能进行样式操作
        var btn = document.getElementsByTagName("button")
        var div = document.getElementsByClassName("content");
        // 遍历元素
        for (var i = 0; i < btn.length; i++) {
            // 这使用函数function函数是在做的时候。n出现了闭包。用函数把他包含起来解决问题
            (function (n) {
                // 点击对应button，然后响应function，做出function里的事件 
                btn[n].onclick = function () {
                    // 遍历按钮，当没有选中的按钮和文本框恢复默认样式
                    for (var j = 0; j < btn.length; j++) {
                        btn[j].className = ""
                        div[j].style.display = "none";
                    }
                    // 显示选中按钮和文本样式
                    this.className = "active";
                    div[n].style.display = "block";
                }
            }(i))
        }
    </script>

四效果图

在这里插入图片描述

五，全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
</head>

<body>
    <div id="main">
        <!-- active是默认选中的div  -->
        <button class="active">11</button>
        <button>22</button>
        <button>33</button>
        <!-- 三个div在css中都设置为none 这里的display：block是默认选中的div  -->
        <div style="display: block;" class="content">11</div>
        <div class="content">22</div>
        <div class="content">33</div>
    </div>
    <script type="text/javascript">
    // 先获取到button和content，后面才能进行样式操作
        var btn = document.getElementsByTagName("button")
        var div = document.getElementsByClassName("content");
        // 遍历元素
        for (var i = 0; i < btn.length; i++) {
            // 这使用函数function函数是在做的时候。n出现了闭包。用函数把他包含起来解决问题
            (function (n) {
                // 点击对应button，然后响应function，做出function里的事件 
                btn[n].onclick = function () {
                    // 遍历按钮，当没有选中的按钮和文本框恢复默认样式
                    for (var j = 0; j < btn.length; j++) {
                        btn[j].className = ""
                        div[j].style.display = "none";
                    }
                    // 显示选中按钮和文本样式
                    this.className = "active";
                    div[n].style.display = "block";
                }
            }(i))
        }
    </script>

    <style>
        /* 加一些样式，让他变得更好看 */
        #main {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            margin-top: 40px;

        }

        div button {
            width: 200px;
            height: 100px;
            margin-left: 30px;
        }

        #main div {
            height: 200px;
            width: 600px;
            margin-top: 50px;
            border: 2px solid rgb(27, 26, 26);
            margin-left: 60px;
            font-size: 50px;
            text-align: center;
            /* 默认没有选中的div隐藏 */
            display: none;
        }

        /* 设置点击按钮时按钮改变颜色 */
        .active {
            background-color: rgb(50, 202, 223);

        }
    </style>

</body>

</html>