單擊時更改 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>