通过jQuery实现点击按钮，隐藏一个div，显示另一个div

最新推荐文章于 2021-06-03 05:52:41 发布

棒棒棠。

最新推荐文章于 2021-06-03 05:52:41 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： B/S

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/LYN_xj94512/article/details/88764396

B/S 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript通过点击按钮实现在同一页面上切换显示不同Div元素的方法，避免了页面跳转，提供了更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这种方式可以避免跳转页面，在一个页面中显示不同的结果。

    <div id="div1" style="width:150px;height:50px;background-color:springgreen;">
        这是第一个div

    </div>
    <div id="div2" style="width:150px;height:50px;background-color: red; display: none">
        这是第二个div
    </div>
    <button id="btn">点我切换div</button>

    <script>
        $("#btn").click(function () {
            $("#div2").show();
            $("#div1").hide();
            
    });
    </script>

结果显示：
在这里插入图片描述
点击按钮后的结果：