单击时更改 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>