单击时更改 li 元素的背景

Question

我想要做的是当用户点击一个链接时，背景应该改变为指示用户点击了哪个链接。我正在尝试使用 jQuery 来做到这一点：

$('.menuLink').click(function() {
  var img = $(this).find('img');
  var id = $(this).attr('id');
  $("#" + id).addClass('activeLink');
  console.log(id);
});

.menuLinks li {
  color: #ffffff;
  float: left;
  margin-left: 2px;
  width: 115px;
  height: 60px;
  background-color: #004f80;
  text-align: center;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
.menuLinks li:hover {
  background-color: #006eb3;
  cursor: pointer;
}
.menuLinks li a {
  color: #fff;
}
.activeLink {
  color: #004f80;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menuLinks">
  <li class="menuLink" id="tillstandshavare">Link1</li>
  <li class="menuLink" id="stationer">Lnk2</li>
  <li class="menuLink" id="formular">Link3</li>
  <li class="menuLink" id="fragor">Link4</li>
  <li class="menuLink" id="installningar">Link5</li>
</ul>

如您所见，我附加了 activeLink 类。但背景从未改变。我认为这是因为 menuLinks 没有被覆盖。

Answer 1

问题是因为.activeLink 类不够具体，无法覆盖默认的.menuLink li 样式。你需要让它更具体。另请注意，您可以使用this 来引用单击的元素，而不是手动构建 id 选择器字符串。试试这个：

$('.menuLink').click(function() {
  $(this).addClass('activeLink');
});

.menuLinks li {
  color: #ffffff;
  float: left;
  margin-left: 2px;
  width: 115px;
  height: 60px;
  background-color: #004f80;
  text-align: center;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
.menuLinks li:hover {
  background-color: #006eb3;
  cursor: pointer;
}
.menuLinks li a {
  color: #fff;
}
.menuLinks li.activeLink {
  color: #004f80;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menuLinks">
  <li class="menuLink" id="tillstandshavare">Link1</li>
  <li class="menuLink" id="stationer">Lnk2</li>
  <li class="menuLink" id="formular">Link3</li>
  <li class="menuLink" id="fragor">Link4</li>
  <li class="menuLink" id="installningar">Link5</li>
</ul>