Question

这应该很简单，但我无法让它工作

我的清单

<div id="ctMenu">
<ul>
    <li><a href="#">WELCOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">CONTACT</a></li>
</ul></div>

我的CSS

#ctMenu { width:1010px; margin: 20px 0 0 0; padding:20px 0 20px 0}
#ctMenu ul { margin:0; padding:0;}
#ctMenu ul li { margin-left: 0; margin-bottom:0;  display:inline;}
#ctMenu ul li a { padding: 10px 25px 9px 25px; background-color:green; text-decoration: none; color:Black; font-weight:bold; }
#ctMenu ul li a:hover {background-color:Gray; }
.selected { background-color: yellow; }

我的jQuery

$(document).ready(function () {
        $('#ctMenu ul li a').click(function () {
            $('#ctMenu ul li a').removeClass('selected');
            $(this).addClass('selected');
        });
    });

我只是想在有人点击链接时将css设置为“.selected”类。有什么建议吗？

编辑：这是JSFiddle

Answer 1

问题是您声明了一个更强的CSS规则#ctMenu ul li a，它会覆盖.selected。请尝试使用此CSS规则：

#ctMenu ul li a.selected { background-color: yellow; }

Answer 2

这是一个working fiddle。

要理解这一点，您应该阅读specificity。

请注意，#ctMenu ul li a.selected { background-color: yellow }比.selected更具体，这就是它的工作原理。

Answer 3

这一次在 Firebug 上进行了全面测试，工作正常......

替换此

$('#ctMenu ul li a').removeClass('selected');

要

$('#ctMenu ul li a').removeClass('selected').removeAttr("class");

执行此更改的原因是： - 此时类属性仍然存在，class="selected"正在更改，当单击用户时。但是，如果您添加.removeAttr("class")，则点击其他链接时，现有的类属性将被删除。你的代码将是一个完整的代码..

您可以使用 Firefox

上的 FireBug 进行测试

jquery - 所选链接上的addClass

3 个答案: