Question

假设我有以下HTML ...

<a class="active" href="#section1">Link 1</a>  
<a href="#section2">Link 2</a>

当点击链接2时，我希望它接收活动类并从链接1本身中删除该类，以便它实际上变为：

<a href="#section1">Link 1</a>  
<a class="active" href="#section2">Link 2</a>

这应该是双向的。 IE浏览器。点击任何链接获取该类并将其从另一个中删除。

如何使用jQuery完成这项工作？提前谢谢！

Answer 1

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

编辑：添加了jsfiddle

http://jsfiddle.net/LJ6L5/

Answer 2

只需使用：addClass和removeClass

但是，首先使用第二类（'可激活'）限制您的可激活链接，以不影响页面上的其他链接：

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

使用HTML：

<a class="activable active" href="#section1">Link 1</a>  
<a class="activable" href="#section2">Link 2</a>

Answer 3

HTML：

<a class="myrefclass" href="#section1">Link 1</a>  
<a class="myrefclass active" href="#section2">Link 2</a>

JS：

var ref = $("a.myrefclass");
$(ref).bind('click', function() {

   if (!$(this).hasClass("active")) {

      $(ref).removeClass("active");
      $(this).addClass("active);
   }

});

JS II（征求意见）：

var ref = $("a.myrefclass");
$(ref).bind('click', function(ev) {

   if (!$(this).hasClass("active")) {
      ev.stopPropagation();
      return false;
   }

   $(ref).removeClass("active");
   $(this).addClass("active);

});

在点击Anchor标签时添加一个类

3 个答案: