当前位置 : 主页 > 网页制作 > JQuery >

jquery – 所选链接上的addClass

来源:互联网 收集:自由互联 发布时间:2021-06-16
这应该很简单,但我无法让它工作 我的列表 div id="ctMenu"ul lia href="#"WELCOME/a/li lia href="#"ABOUT US/a/li lia href="#"CONTACT/a/li/ul/div 我的CSS #ctMenu { width:1010px; margin: 20px 0 0 0; padding:20px 0 20px 0}#ctMen
这应该很简单,但我无法让它工作

我的列表

<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

问题是你声明了一个更强的CSS规则#ctMenu ul li a覆盖了.selected.请尝试使用此CSS规则:

#ctMenu ul li a.selected { background-color: yellow; }
网友评论