如何通过点击切换多个 div 的 CSS 类-js教程-PHP中文网

如何通过点击切换多个 div 的 CSS 类

本文介绍使用 jquery 实现点击一个元素时同步切换多个 div 的 css 类，从而控制其透明度状态，并支持双向切换（即再次点击恢复原状），同时推荐添加 css 过渡以提升视觉体验。

本文介绍使用 jquery 实现点击一个元素时同步切换多个 div 的 css 类，从而控制其透明度状态，并支持双向切换（即再次点击恢复原状），同时推荐添加 css 过渡以提升视觉体验。

要实现点击 .gif_left 时，不仅自身透明度归零（opacity: 0），同时让 .gif_right 透明度变为 1（opacity: 1），且再次点击可完全逆转该状态，关键在于在同一个事件处理函数中统一操作多个目标元素，而非仅作用于 this。

以下是完整、可直接运行的解决方案：

<style>
  .gif_left, .gif_right {
    width: 200px;
    height: 150px;
    display: inline-block;
    transition: opacity 0.4s ease; /* 推荐添加平滑过渡 */
  }
  .gif_left { background-color: #ffcc00; opacity: 1; }
  .gif_right { background-color: #3498db; opacity: 0; }

  .click { opacity: 0 !important; }
  .click2 { opacity: 1 !important; }
</style><div class="gif_left"></div>
<div class="gif_right"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(document).ready(function() {
  $('.gif_left').click(function () {
    $('.gif_left').toggleClass('click');
    $('.gif_right').toggleClass('click2');
  });
});
</script>

✅ 说明与要点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

使用 $('.gif_left').toggleClass('click') 和 $('.gif_right').toggleClass('click2') 确保两个元素的状态严格同步；
!important 在 CSS 中用于确保类样式能覆盖初始内联或规则中的 opacity 值（可根据实际 CSS 层叠结构调整）；
transition: opacity 0.4s ease 让透明度变化具备自然动画效果，大幅提升用户体验；

若需支持任一 div 点击均触发切换（如左右均可点击互换），可改用多选择器绑定：

$('.gif_left, .gif_right').click(function() {
  $('.gif_left').toggleClass('click');
  $('.gif_right').toggleClass('click2');
});

⚠️ 注意事项：

避免在 .click 和 .click2 中重复定义 opacity 以外的布局属性（如 display: none），否则可能干扰 transition 效果；
若页面存在多个 .gif_left/.gif_right 组，建议为每组添加唯一父容器并使用相对选择器（如 $(this).closest('.group').find('.gif_right')），防止全局误操作；
现代项目中也可考虑用纯 JavaScript 替代 jQuery（如 element.classList.toggle()），但本方案兼顾兼容性与简洁性。