Question

我有导航元素，可以为点击的链接添加一个类，并从剩余的链接中删除该类。如何轻松地将此合并到一个功能中，该功能可识别单击哪个链接并从其余链接（或活动链接）中删除该类

下面是一个链接的代码 - 试图为每个链接避免这种情况：

$("#work").click(function () {
    $(this).addClass('active');
    $("#about").removeClass('active');
    $("#testimonial").removeClass('active');
    $("#instruction").removeClass('active');
    $("#blog").removeClass('active');
    $("#contact").removeClass('active');
});

由于

Answer 1

我可能误解了这个问题，但是怎么样：

function mark_active() {
  $('a').removeClass('active');
  $(this).addClass('active');
}
$("#work, #about, #testimonial, #instruction, #blog, #contact").click(mark_active);

Answer 2

如果我理解这个问题......

var allYourLinks = $("someSelector");

allYourLinks.click(function () {
    // remove all active class
    allYourLinks.removeClass('active');
    // add the class to the clicked link
    $(this).addClass('active');
    // even better than .addClass call is:
    this.className += " active";
});

Answer 3

为该组的所有链接添加一个类，例如“activeGroup”。

使用以下功能：

var activeGroupClick = function(){
  $('.activeGroup').removeClass('active');
  $(this).addClass('active');
}

$('.activeGroup').click(activeGroupClick);

Answer 4

很难理解你想做什么，但我认为这可能会有所帮助：

var links = $('a');
links.click(function () {
    links.removeClass('active');
    $(this).addClass('active');
});

Answer 5

考虑到，所有链接都是<a>，在父级内部可以说#menu。

var allchild = $("#menu").children("a");
allchild.click(function () {
   allchild.removeClass('active'); //remove the classes from all the menus
   $(this).addClass('active');
});

即使不是

$("#work").click(function () {
    $("#work, #about, #testimonial, #instruction, #blog, #contact").removeClass('active');
    $(this).addClass('active');
});

如何合并此jquery代码

5 个答案: