javascript - Css 类激活

Question

我在使用 css 和 jQuery 时遇到了一些小问题。我有 2 个按钮，我想将点击的按钮的背景设置为蓝色，我想使用“事件”css 属性来执行此操作。由于某种原因它不工作。每当按钮不再处于事件状态时，它就会失去背景颜色。这是代码: HTML:

<div id = 'hey'>
  <div class = 'b' id = 'b1' href="#">Button one</div>
    <div class = 'b' id = 'b2' href="#">Button Two</div>
</div>

CSS:

body,html { 
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #000;
}
#hey { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}

.b {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;

  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
.b:active {
  background-color: blue;
}

JS:

  $(".b").click(function() {
    $(this).addClass('active');
  });

Answer 1

:active 是一个伪类，意思是“被激活时”(通常是鼠标按钮被按住时)。

你给它一个class active 所以你需要使用一个class selector: .active (使用 . 而不是 :).

---

我建议不要使用与伪类名称匹配的类名称，因为它很容易造成混淆。