Question

我知道这是编写这些规则的冗余方式，所以我想知道是否有人知道更好的写入方式。谢谢！

$('.nav li a').eq(0).click(function() {

    $('.nav li a').eq(0).addClass("active");
    $('.nav li a').eq(1).removeClass("active"); 
    $('.nav li a').eq(2).removeClass("active");
    $('.nav li a').eq(3).removeClass("active");

});
$('.nav li a').eq(1).click(function() {

    $('.nav li a').eq(0).removeClass("active");
    $('.nav li a').eq(1).addClass("active");    
    $('.nav li a').eq(2).removeClass("active");
    $('.nav li a').eq(3).removeClass("active");

});
$('.nav li a').eq(2).click(function() {

    $('.nav li a').eq(0).removeClass("active");
    $('.nav li a').eq(1).removeClass("active"); 
    $('.nav li a').eq(2).addClass("active");
    $('.nav li a').eq(3).removeClass("active");

});
$('.nav li a').eq(3).click(function() {

    $('.nav li a').eq(0).removeClass("active");
    $('.nav li a').eq(1).removeClass("active"); 
    $('.nav li a').eq(2).removeClass("active");
    $('.nav li a').eq(3).addClass("active");

});

Answer 1

我将课程移到<li>，就像这样：

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

如果您只是更改样式以匹配，例如：

li.active a { /* styles */ }

...然后在click元素上使用<li>处理程序要简单得多，因为那些是您正在处理的集合。还有效率更高的.delegate()方法：

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

Answer 2

你有很多可以压缩的代码。试试这个：

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

Answer 3

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

Answer 4

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

Answer 5

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

从每个a中删除active类，然后将其添加到单击的元素中。

Answer 6

我对你的文档看起来有些假设，但这就是我可能做的事情：

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

有没有更好的方法来编写此导航语句？

6 个答案: