如何在JSP中点击按钮切换Div？页面加载时Div1显Div2隐

我来帮你搞定这个需求，下面提供两种常用的实现方案，你可以根据项目的技术栈灵活选择：

方案一：原生JavaScript实现（无外部依赖） #

这种方案不需要引入任何第三方库，兼容性拉满，适合所有现代浏览器。

步骤1：编写JSP页面结构 #

在showandhide.jsp里先搭好Div、列表和按钮的基础结构，同时用CSS设置好初始显示状态：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Show & Hide Demo</title>
    <style>
        /* 初始状态：Div1可见，Div2隐藏 */
        #div1 {
            display: block;
        }
        #div2 {
            display: none;
        }
        /* 可选：给Div加个样式，方便区分 */
        .container-div {
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="div1" class="container-div">
        <ul>
            <li>Div1列表项1</li>
            <li>Div1列表项2</li>
            <li>Div1列表项3</li>
        </ul>
    </div>

    <div id="div2" class="container-div">
        <ul>
            <li>Div2列表项1</li>
            <li>Div2列表项2</li>
            <li>Div2列表项3</li>
        </ul>
    </div>

    <button id="toggleBtn">click me</button>

    <script>
        // 等DOM完全加载完再执行JS，避免找不到元素
        document.addEventListener('DOMContentLoaded', function() {
            const div1 = document.getElementById('div1');
            const div2 = document.getElementById('div2');
            const toggleBtn = document.getElementById('toggleBtn');

            toggleBtn.addEventListener('click', function() {
                // 判断当前显示状态，进行切换
                if (div1.style.display === 'none' || div1.style.display === '') {
                    div1.style.display = 'block';
                    div2.style.display = 'none';
                } else {
                    div1.style.display = 'none';
                    div2.style.display = 'block';
                }
            });
        });
    </script>
</body>
</html>

关键细节说明： #

• 初始状态用CSS设置display属性比JS更可靠，能避免DOM未加载完成时JS执行失败的问题。
• 用DOMContentLoaded事件确保JS代码在所有DOM元素渲染完成后再运行，防止出现获取不到元素的报错。
• 切换时要考虑初始状态下元素行内样式为空的情况，所以加了div1.style.display === ''的判断。

方案二：jQuery实现（简洁高效） #

如果你的项目已经引入了jQuery，这种方案代码会更简洁清爽：

步骤1：先引入jQuery #

在页面头部引入jQuery（可以用本地文件或者CDN，这里用CDN示例）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤2：编写页面结构和JS代码 #

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Show & Hide Demo</title>
    <style>
        #div1 { display: block; }
        #div2 { display: none; }
        .container-div { padding:15px; margin:10px 0; border:1px solid #ccc; }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="div1" class="container-div">
        <ul>
            <li>Div1列表项1</li>
            <li>Div1列表项2</li>
            <li>Div1列表项3</li>
        </ul>
    </div>

    <div id="div2" class="container-div">
        <ul>
            <li>Div2列表项1</li>
            <li>Div2列表项2</li>
            <li>Div2列表项3</li>
        </ul>
    </div>

    <button id="toggleBtn">click me</button>

    <script>
        $(document).ready(function() {
            $('#toggleBtn').click(function() {
                // 用toggle()方法自动切换显示/隐藏状态，不用手动判断
                $('#div1').toggle();
                $('#div2').toggle();
            });
        });
    </script>
</body>
</html>

关键细节说明： #

• jQuery的toggle()方法会自动识别元素当前的显示状态，一键完成切换，代码量直接减半。
• $(document).ready()和原生的DOMContentLoaded作用一致，确保JS在DOM就绪后执行。

这两种方案都能完美实现你的需求：页面加载时Div1可见、Div2隐藏，点击按钮后两者状态互换。你可以根据项目实际情况选合适的方案~

内容的提问来源于stack exchange，提问作者Abhi