js 选项卡

最新推荐文章于 2022-07-01 14:53:10 发布

弦弦弦

最新推荐文章于 2022-07-01 14:53:10 发布

阅读量183

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_45735694/article/details/122550785

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0;
        }

        input {
            padding: 5px 10px;
        }

        input.active {
            background: red;
            color: #fff;
        }

        #content p {
            display: none;
            width: 500px;
            height: 500px;
            border: 2px solid blue;
            text-align: center;
            line-height: 500px;
            font-size: 100px;
        }

        #content p.active {
            display: block;
        }
    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("input");
            var ps = document.getElementsByTagName("p");
            //点击按钮 让对应的p标签显示 其他p标签隐藏
            for(var i=0; i<btns.length; i++){
                btns[i].idx = i;
                btns[i].onclick = function(){
                    // 让对应的p标签显示 其他p标签隐藏  排他思想
                    //1.干掉所有人
                    for(var j=0; j<ps.length; j++){
                        //className用来操作类名
                        //1.获取类名  元素.className
                        //2.设置类名  元素.className = "类名"
                        ps[j].className = "";
                    }
                    //复活我自己  让索引和当前点击按钮一样的p标签显示
                    //需要获取到点击按钮的索引  即 使用自定义索引实现
                    ps[this.idx].className = "active";

                    //排他思想 让点击的按钮亮 其他按钮不亮
                    //干掉所有人
                    for(var k=0; k<btns.length; k++){
                        btns[k].className = "";
                    }
                    //复活我自己
                    this.className = "active";
                }
            }
        }
    </script>
</head>

<body>
    <input type="button" value="按钮一" class="active" />
    <input type="button" value="按钮二" />
    <input type="button" value="按钮三" />
    <div id="content">
        <p class="active">内容一</p>
        <p>内容二</p>
        <p>内容三</p>
    </div>
    
</body>

</html>