<!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>

# 前端 # javascript # css
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间
cover

KubeEdge 新版本5大特性解读：更完备的节点设备能力，全新的Dashboard体验

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间