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()来说出类似的内容＃34;我点击了上一页中带有id的li，所以现在更新该类＆＃34;

所以

谢谢！

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");

});

FIDDLE DEMO

Answer 2

USe

$(".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");          
});

它的事件链接。

Look li是ID而不是CLASS。

Answer 4

<强> Demo
您的selector is wrong $（＆＃34; .header＆＃34;）。在您的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


});

jQuery更新父项的类

4 个答案: