js实现内容切换
使用 classList 切换类名
通过 JavaScript 的 classList.toggle() 方法可以动态添加或移除 CSS 类，实现内容切换效果。这种方法适用于需要改变元素样式的场景。
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
toggleBtn.addEventListener('click', () => {
content.classList.toggle('active');
});对应的 CSS 可以这样设置：
.content {
display: none;
}
.content.active {
display: block;
}修改 innerHTML 或 textContent
直接替换元素内容是最直接的切换方式，适用于需要完全改变显示内容的场景。
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
let isOriginal = true;
toggleBtn.addEventListener('click', () => {
if(isOriginal) {
content.innerHTML = '<p>新内容</p>';
} else {
content.textContent = '原始内容';
}
isOriginal = !isOriginal;
});使用 style 属性切换显示状态
通过修改元素的 style 属性可以实现显示/隐藏切换，这种方法不需要预先定义 CSS 类。
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
toggleBtn.addEventListener('click', () => {
if(content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});使用数据属性存储状态
对于复杂的内容切换，可以使用数据属性(data-*)来存储当前状态信息。
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
toggleBtn.addEventListener('click', () => {
const currentState = content.dataset.state;
if(currentState === 'hidden') {
content.style.opacity = '1';
content.dataset.state = 'visible';
} else {
content.style.opacity = '0';
content.dataset.state = 'hidden';
}
});实现选项卡切换
对于多个内容之间的切换，可以使用选项卡模式。
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.target;
contents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(target).classList.add('active');
});
});对应的 HTML 结构：
<div class="tabs">
<button class="tab" data-target="content1">标签1</button>
<button class="tab" data-target="content2">标签2</button>
</div>
<div id="content1" class="content active">内容1</div>
<div id="content2" class="content">内容2</div>使用 CSS 动画增强效果
结合 CSS 过渡或动画可以实现更平滑的内容切换效果。
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
toggleBtn.addEventListener('click', () => {
content.classList.toggle('fade');
});对应的 CSS：
.content {
opacity: 1;
transition: opacity 0.3s ease;
}
.content.fade {
opacity: 0;
}
