点击

Question

我想要做的是当用户点击链接时，后台应该更改为指示用户点击了哪个链接。我试图用jQuery做到这一点：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;