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;
}