当前位置：首页 > JavaScript

js实现切换效果

2026-04-04 16:05:43JavaScript

使用 classList 切换类名

通过 classList.toggle() 方法可以动态添加/移除类名，配合 CSS 实现切换效果。这是现代浏览器推荐的方式：

const element = document.getElementById('target');
element.classList.toggle('active-class');

CSS 部分需要预先定义样式：

.active-class {
  background-color: #f00;
  transform: scale(1.1);
}

直接修改样式属性

直接操作元素的 style 属性实现简单切换：

const btn = document.querySelector('.toggle-btn');
btn.addEventListener('click', () => {
  const box = document.querySelector('.box');
  box.style.display = box.style.display === 'none' ? 'block' : 'none';
});

使用数据属性切换状态

通过自定义 data-* 属性存储状态信息：

js实现切换效果

document.querySelector('.toggle-btn').addEventListener('click', (e) => {
  const panel = e.currentTarget.nextElementSibling;
  const isExpanded = panel.dataset.expanded === 'true';
  panel.dataset.expanded = !isExpanded;
  panel.style.maxHeight = isExpanded ? '0' : '500px';
});

多元素选项卡切换

实现选项卡内容切换的完整示例：

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有active类
    tabs.forEach(t => t.classList.remove('active'));
    contents.forEach(c => c.classList.remove('active'));

    // 添加当前active类
    tab.classList.add('active');
    const targetId = tab.dataset.target;
    document.getElementById(targetId).classList.add('active');
  });
});

使用 CSS 变量切换主题

通过 JavaScript 修改 CSS 变量实现主题切换：

function toggleTheme() {
  const root = document.documentElement;
  const isDark = root.style.getPropertyValue('--bg-color') === '#333';
  root.style.setProperty('--bg-color', isDark ? '#fff' : '#333');
  root.style.setProperty('--text-color', isDark ? '#000' : '#fff');
}

CSS 中需要预先定义变量：

js实现切换效果

:root {
  --bg-color: #fff;
  --text-color: #000;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}

动画切换效果

使用 transition 或 animation 实现平滑切换：

function toggleAnimation() {
  const box = document.querySelector('.animated-box');
  box.style.animation = box.style.animation ? '' : 'slide 2s ease';
}

对应的 CSS 动画定义：

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
.animated-box {
  transition: all 0.3s ease;
}

使用第三方库实现复杂切换

对于复杂场景可以考虑使用第三方动画库，如 GSAP：

import { gsap } from 'gsap';

function toggleGSAP() {
  const el = document.getElementById('gsap-target');
  gsap.to(el, {
    duration: 0.5,
    x: 100,
    opacity: 0.5,
    scale: 1.2,
    ease: "power2.inOut"
  });
}