jquery点击显示2隐藏层

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过使用 jQuery，开发者可以用更少的代码实现复杂的网页效果。

类型与应用场景

类型：这是一个典型的 DOM 操作和事件处理的应用。
应用场景：适用于需要动态显示或隐藏页面元素的场景，如导航菜单、弹出窗口、选项卡切换等。

示例代码

以下是一个简单的示例，展示了如何使用 jQuery 实现点击按钮显示一个隐藏层，同时隐藏另一个隐藏层：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Show/Hide Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>

<button id="toggleButton">Toggle Layers</button>
<div id="layer1" class="hidden">Layer 1 Content</div>
<div id="layer2" class="hidden">Layer 2 Content</div>

<script>
$(document).ready(function() {
    $('#toggleButton').click(function() {
        $('#layer1, #layer2').toggleClass('hidden');
    });
});
</script>

</body>
</html>