点击链接时更改活动的li元素，使用jQuery实现。

Question

我想制作一个菜单，并在点击时更改类。

当我点击没有 class="active" 的“li” 时，希望 jQuery 在空的 <li> 上添加一个类，并从其他“li”中删除它。

<li class="active"><a href="javascript:;" onclick="$.data.load(1);">data</a></li>
<li><a href="javascript:;" onclick="$.data.load(2);">data 2</a></li>

有人可以帮我吗？:)

- william

Answer 1

我想你的意思是这个：

$('li > a').click(function() {
    $('li').removeClass();
    $(this).parent().addClass('active');
});

- karim79

Answer 2

// When we click on the LI
$("li").click(function(){
  // If this isn't already active
  if (!$(this).hasClass("active")) {
    // Remove the class from anything that is active
    $("li.active").removeClass("active");
    // And make this active
    $(this).addClass("active");
  }
});

- Sampson

Answer 3

$('li').click(function()
{
    $('li', $(this).parent()).removeClass('active');
    $(this).addClass('active');
}

- Greg

Answer 4

$(window).load(function(){
    page=window.location.pathname.split("/").pop();
    menuChildren = $('a[href="' + page + '"]');  
    $(menuChildren).parent('li').addClass('active');
});

上面的代码将查找URL并弹出最后一个元素（即文件名）。然后，它查找具有与URL相同值的href属性的锚标记，然后为其父li标记添加active类。

- Shobi

Answer 5

这应该让你接近了。

$("li").click(function() {
  $("li").removeClass("active");
  $(this).addClass("active");
});

- Andy Gaskell