当前位置：首页 > JavaScript

js实现div切换

2026-03-01 06:16:58JavaScript

使用 classList 切换显示

通过 classList 的 toggle 方法控制 CSS 的 display 属性实现切换效果。HTML 结构中包含切换按钮和目标 div 元素：

<button id="toggleBtn">切换显示</button>
<div id="contentDiv" class="hidden">这是要切换的内容</div>

CSS 定义隐藏样式：

.hidden {
  display: none;
}

JavaScript 实现切换逻辑：

document.getElementById('toggleBtn').addEventListener('click', function() {
  document.getElementById('contentDiv').classList.toggle('hidden');
});

动态修改 style 属性

直接操作元素的 style 对象实现即时样式切换，适用于需要动态计算样式值的场景：

const div = document.getElementById('contentDiv');
document.getElementById('toggleBtn').addEventListener('click', function() {
  div.style.display = div.style.display === 'none' ? 'block' : 'none';
});

多 div 选项卡切换

实现多个内容区块的选项卡式切换，需要维护当前激活状态的索引：

<div class="tab-buttons">
  <button class="tab-btn active" data-tab="tab1">标签1</button>
  <button class="tab-btn" data-tab="tab2">标签2</button>
</div>
<div class="tab-content">
  <div id="tab1" class="tab-panel active">内容1</div>
  <div id="tab2" class="tab-panel">内容2</div>
</div>

JavaScript 实现：

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 移除所有激活状态
    document.querySelectorAll('.tab-btn, .tab-panel').forEach(el => {
      el.classList.remove('active');
    });

    // 设置当前激活状态
    this.classList.add('active');
    document.getElementById(this.dataset.tab).classList.add('active');
  });
});

动画过渡效果

结合 CSS transition 实现平滑的显示/隐藏动画效果：

.fade {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s, height 0.3s;
}

.fade.show {
  opacity: 1;
  height: auto;
}

JavaScript 控制类名切换：

document.getElementById('toggleBtn').addEventListener('click', function() {
  document.getElementById('contentDiv').classList.toggle('show');
});

使用 jQuery 简化操作

如果项目中使用 jQuery 库，可以更简洁地实现切换效果：

js实现div切换

$('#toggleBtn').click(function() {
  $('#contentDiv').toggle();
});

// 带有动画效果的版本
$('#toggleBtn').click(function() {
  $('#contentDiv').fadeToggle(300);
});