Question

我正在进行一个小项目，我正在使用jQuery。我尝试使用一个小jQuery来更改类，以便在单击时更改某些css样式，但它似乎不起作用。

继承人重要的html：

<ul id="UInavList">
        <li class="selectedNav"><a href="javascript:;">My Activity</a></li>
        <li ><a href="javascript:;">My Tests</a></li>
        <li ><a href="javascript:;">Messaging</a></li>
        <li ><a href="javascript:;">Search</a></li>
    </ul>

并且继承了javascript：

$('#UInavList li').click( function() {
    $('#UInavList li').removeClass('selectedNav');
    $(this).addClass('selectedNav');
})

如果您想查看所有代码，请访问：http://jsfiddle.net/chromedude/XXXwL/

Answer 1

一种方法：

$('#UInavList li').click( function() {
    $(this).addClass('selectedNav').siblings().removeClass('selectedNav');
});

为了避免与冗余相关的错误（拼写错误），您只能定义一次类名：

$('#UInavList li').click( function() {
    var name = "selectedNav";
    $(this).addClass(name).siblings().removeClass(name);
});

在这个简单的例子中，似乎不需要，但如果你使用的名称超过两次，或者你的处理程序更复杂，你应该考虑它。

Answer 2

您的代码已在jsfiddle中运行，您只是没有将框架设置为在右侧包含jQuery - 也没有设置类来查看更改，很难判断它是否有效。

看看这个演示，它与你的演示完全相同，只是它有一个CSS条目来显示更改，我在旁边设置了jQuery选项。

http://jsfiddle.net/XXXwL/8/

然而，我会定位锚而不是li本身，并使用$(this).closest('li').addClass('selectedNav');作为首选项的第二行，如果你使用click（）定位锚点，则记住返回false，以便href为没有跟着。

Answer 3

用这个替换ULNavlist li，它应该可以工作

$(this).removeClass('selectedNav');
        $(this).addClass('selectedNav');
        alert("hello");

这是改变类的正确jQuery吗？

3 个答案: