如何通过CSS与jQuery实现双背景Div中A常驻、B点击切换的效果

嘿，这个需求用CSS类切换来实现是最舒服的，比直接改内联样式靠谱多了——毕竟样式相关的逻辑尽量放在CSS里，JS只负责帮我们切换状态就行，后期维护起来也方便。

第一步：调整CSS样式，把基础状态和切换状态分开 #

先把你的CSS拆成基础样式和切换类，这样逻辑更清晰：

/* 基础状态：只显示背景A，这个是一直存在的 */
.container {
  width: 700px; /* 记得给容器设宽高！空div没尺寸的话背景看不到 */
  height: 200px;
  background: url(A.png) 600px 10px no-repeat;
  cursor: pointer; /* 加个鼠标指针，告诉用户这玩意儿能点 */
  /* 可以加个背景色兜底，比如 background-color: #eee; */
}

/* 切换类：加上背景B，和A共存 */
.container.show-bgB {
  background: url(B.png) 10px 10px no-repeat, url(A.png) 600px 10px no-repeat;
}

第二步：用jQuery实现点击切换 #

核心代码超简单，就用toggleClass()方法来回切换我们定义的show-bgB类就行：

$('.container').on('click', function(){
  $(this).toggleClass('show-bgB');
});

这样每次点击容器，就会在「只显示背景A」和「A+B同时显示」之间切换，完美满足你“背景A始终显示，背景B点击控显隐”的需求。

为啥不直接用.css()改样式？ #

要是直接写$(this).css("background", "...")也能实现，但后续如果要改背景位置、加个切换动画或者换背景图，你得跑去JS里改代码；而用类切换的话，只需要调整CSS就行，逻辑分离得更清楚，代码也更好维护。

比如想加个平滑切换的过渡效果？只需要给.container加一行transition: background 0.3s ease;就搞定了，完全不用碰JS～

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