怎样用JavaScript实现div盒子的切换
在 JavaScript 中，实现 div 盒子的切换通常涉及到修改 div 的 display 样式属性或使用 CSS 类来控制显示和隐藏。以下是几种常见的实现方法，包括使用纯 JavaScript 和结合 CSS。
方法 1: 使用纯 JavaScript
1. 使用 display 属性
这种方法直接通过修改 display 样式属性来切换 div 的显示和隐藏。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Toggle</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick="toggleDiv()">Toggle Div</button>
<div id="div1">This is div 1</div>
<div id="div2" class="hidden">This is div 2</div>
<script>
function toggleDiv() {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (div1.style.display === 'none') {
div1.style.display = 'block';
div2.style.display = 'none';
} else {
div1.style.display = 'none';
div2.style.display = 'block';
}
}
</script>
</body>
</html>
2. 使用 visibility 属性
这种方法通过修改 visibility 样式属性来实现切换。元素仍然占据空间，但内容不可见。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Toggle</title>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="toggleDiv()">Toggle Div</button>
<div id="div1">This is div 1</div>
<div id="div2" class="hidden">This is div 2</div>
<script>
function toggleDiv() {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (div1.style.visibility === 'hidden') {
div1.style.visibility = 'visible';
div2.style.visibility = 'hidden';
} else {
div1.style.visibility = 'hidden';
div2.style.visibility = 'visible';
}
}
</script>
</body>
</html>
方法 2: 使用 CSS 类切换
1. 使用 classList.toggle 方法
这种方法通过添加和移除 CSS 类来实现切换，更加灵活和可维护。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Toggle</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick="toggleDiv()">Toggle Div</button>
<div id="div1">This is div 1</div>
<div id="div2" class="hidden">This is div 2</div>
<script>
function toggleDiv() {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.classList.toggle('hidden');
div2.classList.toggle('hidden');
}
</script>
</body>
</html>
2. 使用 classList.add 和 classList.remove
这种方法可以根据需要精确控制 CSS 类的添加和删除。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Toggle</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick="toggleDiv()">Toggle Div</button>
<div id="div1">This is div 1</div>
<div id="div2" class="hidden">This is div 2</div>
<script>
function toggleDiv() {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (div1.classList.contains('hidden')) {
div1.classList.remove('hidden');
div2.classList.add('hidden');
} else {
div1.classList.add('hidden');
div2.classList.remove('hidden');
}
}
</script>
</body>
</html>
总结
实现 div 盒子的切换可以通过修改 display 或 visibility 样式属性，或者使用 CSS 类来控制显示和隐藏。通过 JavaScript 中的 style 属性或 classList 方法，可以灵活地进行控制，满足不同的需求。示例代码提供了三种常见方法，可以根据具体需求选择最合适的实现方式。
关键字
JavaScript, div 盒子切换, display 属性, visibility 属性, classList.toggle, classList.add, classList.remove, CSS 类切换