当前位置：首页 > JavaScript

js实现div切换

2026-04-04 06:53:28JavaScript

使用 classList 切换显示/隐藏

通过切换 CSS 类来实现 div 的显示和隐藏控制。这种方法更符合现代 JavaScript 实践。

<style>
  .hidden {
    display: none;
  }
</style>

<div id="div1">内容1</div>
<div id="div2" class="hidden">内容2</div>

<script>
  function toggleDivs() {
    const div1 = document.getElementById('div1');
    const div2 = document.getElementById('div2');

    div1.classList.toggle('hidden');
    div2.classList.toggle('hidden');
  }
</script>

直接修改 style.display 属性

直接操作 DOM 元素的 style 属性是最基础的方法。

function switchDivs() {
  const divA = document.getElementById('divA');
  const divB = document.getElementById('divB');

  if(divA.style.display === 'none') {
    divA.style.display = 'block';
    divB.style.display = 'none';
  } else {
    divA.style.display = 'none';
    divB.style.display = 'block';
  }
}

多 div 循环切换

当需要循环切换多个 div 时，可以维护一个当前显示索引。

let currentIndex = 0;
const divs = document.querySelectorAll('.switchable');

function cycleDivs() {
  divs.forEach((div, index) => {
    div.style.display = index === currentIndex ? 'block' : 'none';
  });

  currentIndex = (currentIndex + 1) % divs.length;
}

使用数据属性管理状态

通过 HTML5 的 data-* 属性来存储和判断当前显示状态。

<div id="content1" data-visible="true">内容一</div>
<div id="content2" data-visible="false">内容二</div>

<script>
  function toggleContent() {
    const content1 = document.getElementById('content1');
    const content2 = document.getElementById('content2');

    if(content1.dataset.visible === 'true') {
      content1.dataset.visible = 'false';
      content2.dataset.visible = 'true';
      content1.style.display = 'none';
      content2.style.display = 'block';
    } else {
      content1.dataset.visible = 'true';
      content2.dataset.visible = 'false';
      content1.style.display = 'block';
      content2.style.display = 'none';
    }
  }
</script>

动画效果切换

为 div 切换添加过渡动画效果，提升用户体验。

js实现div切换

.fade {
  transition: opacity 0.5s ease;
}
.hide {
  opacity: 0;
  pointer-events: none;
}

function fadeSwitch() {
  const box1 = document.getElementById('box1');
  const box2 = document.getElementById('box2');

  box1.classList.toggle('hide');
  box2.classList.toggle('hide');
}