(超简单)点击按钮切换div

最新推荐文章于 2024-04-11 05:37:43 发布

码农凡

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量7.6k

点赞数 10

文章标签：前端点击事件 javascript css

本文链接：https://blog.csdn.net/weixin_57348768/article/details/121713088

版权

<!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>点击按钮切换div</title>
    <style>
        /* 加入样式 */
        #show1 {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        #show2 {
            /* 这个display：none一定要写上;不然一开始就会显示show2 */
            display: none;
            width: 500px;
            height: 500px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <!-- 给按钮添加一个点击事件 -->
    <button onclick="btn1()">点击1</button>
    <button onclick="btn2()">点击2</button>
    <!-- 准备好显示的div 并给一个id -->
    <div id="show1">
    </div>
    <div id="show2">
    </div>

    <script>
        function btn1() {
            // 设置btn1点击之后会发生什么
            document.getElementById('show1').style.display = 'block';
            document.getElementById('show2').style.display = 'none';
        }

        function btn2() {
            // 这里就是跟btn1一样的意思 点击btn2之后show1会隐藏 同时show2显示
            document.getElementById('show1').style.display = 'none';
            document.getElementById('show2').style.display = 'block';
        }
    </script>
</body>

</html>