jQuery中的addClass不添加類

Question

我一直在尋找這個問題的答案，但仍然存在我的問題。 我從這里（StackOverflow）和其他網站嘗試了所有答案，但仍然不能解決我的問題。

附加信息：DevTools上沒有錯誤。

HTML：

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <title>Test</title> </head> <body> <div class="nav"> <div class="container"> <ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <script src="sample.js"></script> </body> </html>

CSS：

 /*Nav Styles*/ .nav li { text-transform: uppercase; list-style-type: none; display: inline; } .nav a { text-decoration: none; color: black; } /*Active Menu*/ .activeMenu { color: red; }

JS：

 var x = function(){ $('.nav li').click(function(){ //alert($(this).text()); <-- It's working $(this).addClass('activeMenu'); return false; }); }; $(document).ready(x);

非常感謝！

Answer 1

問題是因為您的.activeMenu CSS規則不夠具體，無法覆蓋在a元素上設置的顏色。 您需要使規則更具體：

.activeMenu a {
    color: red;
}

或在其上設置!important 。 前者是更好的做法。

小提琴的例子

Answer 2

您也必須更改CSS：

.activeMenu a {顏色：紅色； }

 var x = function(){ $('.nav li').click(function(){ //alert($(this).text()); <-- It's working $(this).addClass('activeMenu'); return false; }); }; $(document).ready(function() { x(); });

 .nav li { text-transform: uppercase; list-style-type: none; display: inline; } .nav a { text-decoration: none; color: black; } /*Active Menu*/ .activeMenu a { color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="nav"> <div class="container"> <ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div>

jQuery中的addClass不添加類

問題描述

2 個解決方案

解決方案1
3 已采納 2015-04-14 10:10:42

解決方案2
0 2015-04-14 10:07:36

jQuery中的addClass不添加類

問題描述

2 個解決方案

解決方案1 3 已采納 2015-04-14 10:10:42

解決方案2 0 2015-04-14 10:07:36

解決方案1
3 已采納 2015-04-14 10:10:42

解決方案2
0 2015-04-14 10:07:36