Question

我在链接上调用jquery函数onclick。例如：

<a class="active" href="#" onClick="Animate2id('#box1');" >Content 1</a>
<a href="#" onClick="Animate2id('#box2');" >Content 2</a>
<a href="#" onClick="Animate2id('#box3');" >Content 3</a>

正如您所看到的，第一个链接默认为“活动”。我想从第一个链接中删除该类并添加到单击的链接。为此，我尝试在Animate2id函数中添加以下行：

$('.active').removeClass('active');
$(this).addClass('active');

它只是从链接中删除了该类。但是这并没有将类添加到任何链接中。我该如何解决这个问题？

修改这是完整的jQuery函数：

function Animate2id(id){ 
    var animSpeed=2000; 
    var $container=$("#container"); 
    if(ease){ 
        var easeType=ease;
    } else {
        var easeType="easeOutQuart"; 
    }

    $container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}

Answer 1

更好的方法是从锚标记中删除函数调用，而不是创建一个jQuery事件处理程序。

我在jsfiddle中有一个例子：

http://jsfiddle.net/3AKU3/

Answer 2

如果父元素中包含<a>标记，则可以执行以下操作：

$('#parent_element_of_links a').click(function(e) {
    e.preventDefault();
    $('#parent_element_of_links a').removeClass('active');
    $(this).addClass('active');
});

工作示例：http://jsfiddle.net/fDZ97/

您也可以将上面的代码放在您拥有的Animate2id()函数中：

function Animate2id(id, ease) {
    var animSpeed = 2000;
    var $container = $("#container");
    if (ease) {
        var easeType = ease;
    } else {
        var easeType = "easeOutQuart";
    }

    $container.stop().animate({
        "left": -($(id).position().left)
    }, animSpeed, easeType);

    // remove "active" class from all links, add it to this one
    $('#parent_element_of_links a').removeClass('active');
    $(this).addClass('active');
}

更新

this关键字无效，因为它指的是窗口而不是链接。所以我在函数中添加了一个额外的参数，它现在运行得很好，只需记住在onclick中添加this（在定义ease变量之前）：

function Animate2id(id, t, ease) {
    var animSpeed = 2000;
    var $container = $("#container");
    if (ease) {
        var easeType = ease;
    } else {
        var easeType = "easeOutQuart";
    }

    $container.stop().animate({
        "left": $(id).position().left
    }, animSpeed, easeType);

    // remove "active" class from all links, add it to this one
    $('#links a').removeClass('active');
    $(t).addClass('active');
}

使用jsFiddle示例：http://jsfiddle.net/Uqqmy/

Answer 3

这应该有帮助

$("a").on("click", function(e){
   e.preventDefault();
   $(this).addClass("active"); 
   $(this).siblings().removeClass("active");
});

Answer 4

好的，谢谢你粘贴代码，试试这个：

首先在div中包装锚标记组，这样您就可以将它们从页面上的其他锚点中分离出来，然后将它们分组：

所以：

<div id="anchorGroup">
<a class="active" href="#">Content 1</a>
<a href="#">Content 2</a>
<a href="#">Content 3</a>
</div>

然后尝试这个JQuery代码：

    $("#anchorGroup a").click(function() {
    $("#anchorGroup a").removeClass('active');
    $(this).addClass('active');

});

jQuery：如果单击它，则将链接添加到链接

4 个答案:

更新