如何通过onclick事件切换多个div的类实现透明度切换效果

HTML结构 #

先补全你的div闭合标签：

<div class="gif_left"></div>
<div class="gif_right"></div>

CSS样式 #

设置初始透明度及切换类的样式（额外添加宽高和背景色方便测试，可按需调整）：

/* 初始状态 */
.gif_left {
  opacity: 1;
  width: 200px;
  height: 200px;
  background-color: #eee;
  cursor: pointer; /* 提示元素可点击 */
}
.gif_right {
  opacity: 0;
  width: 200px;
  height: 200px;
  background-color: #444;
}

/* 切换用的样式类 */
.click { opacity: 0; }
.click2 { opacity: 1; }

jQuery逻辑实现 #

直接在你现有点击事件里，同步对.gif_right调用toggleClass即可——toggleClass本身会自动在「添加类/移除类」之间切换，刚好匹配点击两次恢复初始状态的需求：

$(document).ready(function() {
  $('.gif_left').click(function () {
    $(this).toggleClass('click');
    $('.gif_right').toggleClass('click2');
  });
});

每次点击.gif_left时，两个div的类会同步切换：第一次点击后.gif_left变透明、.gif_right显示；再次点击就回到初始状态。

内容的提问来源于stack exchange，提问作者Kinarin