父项上的jQuery更新类

Question

我有以下布局：

<ul id="header">
     <li id="item1" class="off">   <a>Abc</a>   </li>
     <li id="item2" class="off">   <a>Abc</a>   </li>
</ul>

当我单击<a>的href时，我想要<li>的类进行更新。

我已经尝试了以下方法，但是没有运气：

$(".header > li a").click(function(){

      $(".header li a.current").removeClass("off");
        $(this).addClass("on");

});

有任何想法吗？

-编辑：好的，我只是意识到我没有正确看待它。

因此，当单击该链接时，将加载一个新页面。 因此，使用click函数是错误的，因为将加载新页面，因此对类的任何更改都将丢失。 因此，我需要使用$(document).ready(function()来表示类似“我单击上一页中具有ID的li，因此现在更新该类”之类的内容。

所以

谢谢！

Answer 1

您可以使用closest()获取父级li ，然后添加该类：

$(this).closest("li").addClass("on");

您还需要使用id选择器$("#header")而不是类选择器$(".header") ：

$("#header > li a").click(function(){

      $("#header li a.current").removeClass("off");
        $(this).closest("li").addClass("on");

});

现场演示

Answer 2

采用

$(".header > li a").click(function(){
      $(".on").removeClass("on");
      $(this).closest("li").addClass("on");


});

Answer 3

工作小提琴http://jsfiddle.net/LDC69/1/

$("#header > li a").click(function(){    
      $(this).parent().removeClass("off").addClass("on");          
});

它的事件链。

看起来li不是ID。

Answer 4

演示
您的selector is wrong $（“。header”）。 在您的html代码<ul id="header">因此您必须使用id选择器$("#header")

$("#header li a").click(function (e) {
    e.preventDefault();
    $(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
    $(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class


});