js 实现切换

使用 classList 切换类名

通过 classList.toggle() 方法动态添加或移除类名，适用于样式切换：

element.classList.toggle('active-class');

条件判断切换

根据当前状态使用 if-else 逻辑切换属性或值：

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

切换显示/隐藏

结合 display 或 visibility 属性控制元素显隐：

element.style.display = element.style.display === 'none' ? 'block' : 'none';

切换多个类名

通过字符串操作或数组管理多个类名切换：

const classes = ['class1', 'class2'];
element.className = element.className === classes[0] ? classes[1] : classes[0];

事件监听切换

结合按钮点击事件实现交互式切换：

button.addEventListener('click', () => {
    content.classList.toggle('hidden');
});

数据驱动切换

根据数据状态动态渲染不同内容（适用于框架如 React/Vue）：

// React 示例
const [isActive, setIsActive] = useState(false);
<button onClick={() => setIsActive(!isActive)}>
    {isActive ? 'ON' : 'OFF'}
</button>