Question

我有一个链接列表，我想使用jQuery将点击的链接设置为活动状态，并让其余的链接删除它们的类。

我目前的设置是这样的：

HTML

<ul>
  <li id="li_1" class="active"><a href="#" id="link1">link 1</a></li>
  <li id="li_2"><a href="#" id="link2">link 2</a></li>
  <li id="li_3"><a href="#" id="link3">link 3</a></li>
</ul>

jquery的

$("#link1").click(function () {
  $("#li_1").removeClass('active');
  $("#li_2").removeClass('active');
  $("#li_3").addClass('active');
});
$("#link2").click(function () {
  $("#li_1").addClass('active');
  $("#li_2").removeClass('active');
  $("#li_3").removeClass('active');
});
$("#link3").click(function () {
  $("#li_1").removeClass('active');
  $("#li_2").addClass('active');
  $("#li_3").removeClass('active');
});

显然这至少不是很好，我想让它成为一个非常简单灵活的1-2班轮功能。我知道这是可能的，但不幸的是我不具备我认识你们很多人所做的jQuery-fu：）

Answer 1

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

或者更好的方法是在<ul>上添加ID：

$('#myUL > li > a').click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
    return false;
});

Answer 2

您需要一种方法来查找链接，例如<ul>的类或ID，以便您能够

$(".theclass").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

（如果所有li都有theclass ，则上述示例应该有效;您不需要{{1}的ID或类} S）

Answer 3

使用.toggleClass（className）： - http://api.jquery.com/toggleClass/

示例：

$('#foo').toggleClass(className, addOrRemove);

Answer 4

/* generic selector, you'd want to give the ul an id or something)*/

    $("ul li a").click(function () {
       $(this).closest('li').addClass('active').siblings().removeClass('active');
    }

Answer 5

尝试（抱歉编辑不断出现语法错误）：

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

Answer 6

在这种情况下，将点击处理程序移动到<li>会更容易（因为这是所有工作发生的地方），如下所示：

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

Give it a try here

jQuery：在li元素之间添加/删除类的最简单方法

6 个答案: