js 实现切换

使用事件监听切换元素状态

通过 addEventListener 绑定点击事件，动态修改元素的类名或样式。例如切换按钮的激活状态：

const button = document.querySelector('.toggle-button');
button.addEventListener('click', () => {
  button.classList.toggle('active');
});

条件渲染实现内容切换

结合条件语句（如 if 或三元运算符）动态渲染不同内容。适用于标签页、模态框等场景：

const [currentTab, setCurrentTab] = useState('home');
// 渲染逻辑
{currentTab === 'home' ? <HomeComponent /> : <ProfileComponent />}

使用 CSS 类名切换显示/隐藏

通过添加/移除类名控制元素的 display 属性，性能优于直接操作样式：

const element = document.getElementById('target');
element.classList.toggle('hidden'); // CSS: .hidden { display: none; }

动画过渡效果切换

结合 CSS 过渡（transition）或动画（animation）实现平滑切换效果：

const box = document.querySelector('.animated-box');
box.style.transform = box.style.transform === 'scale(1)' ? 'scale(1.2)' : 'scale(1)';

路由切换（SPA 场景）

前端框架（如 React Router、Vue Router）管理视图切换：

// React Router 示例
<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

状态管理驱动切换

在复杂应用中，使用 Redux 或 Context API 管理全局状态，触发组件更新：

// Redux 示例
dispatch({ type: 'TOGGLE_THEME', payload: 'dark' });