📅 最后修改于: 2023-12-03 14:51:35.933000 🧑 作者: Mango
在 Web 开发中，经常会遇到需要在用户与界面交互时，根据用户的选择显示或隐藏不同的元素的需求。使用 JavaScript 可以很容易地实现这个功能。本文将介绍基于单选按钮单击反应显示和隐藏 div 元素的实现方法。
首先，我们需要在 HTML 文件中定义一个或多个单选按钮和对应的 div 元素。可以根据具体需求修改下面的示例代码：
<body>
<h2>显示和隐藏 div</h2>
<input type="radio" name="toggle" id="radio1" checked>
<label for="radio1">选项1</label>
<input type="radio" name="toggle" id="radio2">
<label for="radio2">选项2</label>
<input type="radio" name="toggle" id="radio3">
<label for="radio3">选项3</label>
<div id="div1" class="toggle-div">内容1</div>
<div id="div2" class="toggle-div">内容2</div>
<div id="div3" class="toggle-div">内容3</div>
</body>
在上面的示例中，我们创建了一个包含三个单选按钮和三个 div 元素的简单界面。
name="toggle": 将三个单选按钮的 name 属性设置为相同的值，这样它们就能够彼此排斥。id="div1", id="div2", id="div3": 分别给三个 div 元素设置不同的 id。为了能够让 div 元素在隐藏时不占用空间，并且在显示时具有一定的样式，我们可以添加一些 CSS 样式。可以根据具体需求修改下面的示例代码：
<style>
.toggle-div {
display: none; /* 初始状态隐藏 div */
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
background-color: #f2f2f2;
}
</style>
在上面的示例中，我们为具有 .toggle-div 类的元素定义了一些样式。这些元素在初始状态下会被隐藏，使用灰色的边框和背景色，以及一些 padding 和 margin。
接下来，我们使用 JavaScript 来实现单选按钮的点击事件处理函数，并在这个函数中动态显示和隐藏 div 元素。可以根据具体需求修改下面的示例代码：
<script>
// 获取单选按钮和 div 元素的引用
const radios = document.querySelectorAll('input[name="toggle"]');
const divs = document.querySelectorAll('.toggle-div');
// 单选按钮点击事件处理函数
function handleRadioClick(event) {
// 隐藏所有的 div 元素
divs.forEach(div => {
div.style.display = 'none';
});
// 显示相应的 div 元素
const targetDivId = event.target.id.replace('radio', 'div');
const targetDiv = document.getElementById(targetDivId);
targetDiv.style.display = 'block';
}
// 绑定单选按钮的点击事件
radios.forEach(radio => {
radio.addEventListener('click', handleRadioClick);
});
</script>
在上面的示例中，我们使用 querySelectorAll 方法获取了所有的单选按钮和 div 元素的引用。然后，我们定义了一个名为 handleRadioClick 的函数作为单选按钮的点击事件处理函数。在这个函数中，我们使用 forEach 方法遍历所有的 div 元素，并将它们的 display 样式属性设置为 'none' 来隐藏它们。然后，我们通过点击的单选按钮的 id 来确定要显示的 div 元素，并将其 display 样式属性设置为 'block' 来显示它。最后，我们使用 addEventListener 方法将单选按钮的点击事件与 handleRadioClick 函数绑定起来。
现在，当用户点击单选按钮时，相应的 div 元素将会显示，其它的 div 元素将会隐藏。
以上就是基于单选按钮单击反应显示和隐藏 div 元素的 JavaScript 实现方法。根据实际需求，你可以进一步自定义样式和改进交互效果。