javascript实现选项卡切换，固定选项卡3个，不使用for循环，简单容易理解

最新推荐文章于 2021-07-31 17:35:10 发布

kt7123456

最新推荐文章于 2021-07-31 17:35:10 发布

阅读量607

点赞数 1

分类专栏：技术分享代码实现文章标签： javascript css 选项卡

本文链接：https://blog.csdn.net/kt7123456/article/details/84251387

版权

技术分享同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

代码实现

1 篇文章 0 订阅

订阅专栏

页面结果
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container {
        border: 1px solid black;
        display: flex;
        width: 180px;
        flex-direction: column;
        box-shadow: 0 0 2px slateblue;
    }
    .head {
        display: flex;
    }
    input {
        padding: 5px 10px;
        flex:1;
    }
    .shot {
        background-color: white;
        border:none;
        outline: none;
        box-shadow: 0px -2px 1px silver ;
    }
   .content {
       background-color: #fff;
       width: 180px;
       height: 180px;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .content>* {
       display: none;
   }
   h3 {
        display: flex;
        justify-content: center;
    }
</style>
<body>
    <div class="container">
    <div class="head">
            <input type="button" value="按钮1">
            <input type="button"  value="按钮2">
            <input type="button" value="按钮3">
    </div>
    <div class="content">
        <div  id="content1">
            <h3>内容1 </h3>
            <p>
                最高温度我的晚上
            </p>
        </div>
        <div  id="content2">
            <h3>内容2 </h3>
            <p>
                胜多负少的大富大贵
            </p>
        </div>
        <div  id="content3">
            <h3>内容3 </h3>
            <p>
                是的的划分是否发生
            </p>
        </div>
    </div>
    </div>

    <script>
        let inputElements = document.getElementsByTagName('input');

        inputElements[0].addEventListener('click',function () {
            let content1 = document.getElementById("content1");
            document.getElementById("content2").style.display = "none";
            document.getElementById("content3").style.display = "none";
            inputElements[1].removeAttribute("class");
            inputElements[2].removeAttribute("class");
            inputElements[0].setAttribute("class","shot");
            content1.style.display = "block";

        });
        inputElements[1].addEventListener('click',function () {
            let content2 = document.getElementById("content2");
            document.getElementById("content1").style.display = "none";
            document.getElementById("content3").style.display = "none";
            inputElements[0].removeAttribute("class");
            inputElements[2].removeAttribute("class");
            inputElements[1].setAttribute("class","shot");
            content2.style.display = "block";
        });
        inputElements[2].addEventListener('click',function () {
            let content3 = document.getElementById("content3");
            document.getElementById("content1").style.display = "none";
            document.getElementById("content2").style.display = "none";
            inputElements[0].removeAttribute("class");
            inputElements[1].removeAttribute("class");
            inputElements[2].setAttribute("class","shot");
            content3.style.display = "block";
        });
    </script>
</body>
</html>

完毕！

把代码复制到编辑器即可查看结果。。。。。

kt7123456

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript实现选项卡切换，固定选项卡3个，不使用for循环，简单容易理解

页面结果完整代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;style&gt; .
复制链接

扫一扫