添加/删除类onClick Jquery

Question

我已经看过了如何获得用户单击更改类的链接，同时确保兄弟链接采用其原始类的一百万个示例。我对jQuery非常陌生，所以当我尝试这些不同的例子时，我承认我迷路了。这里是我的CSS：

/*active link */ 
.current { 
color: #f48239; 
text-decoration: none; 
} 
/* inactive link*/ 
.link { 
    color: black; 
    text-decoration: none; 

} 

jQuery的功能，只显示对应于该链接的DIV内容被点击：

$(document).ready(function(){ 
    $('a').click(function() { 
    var divname= this.name; 
    $("#"+divname).show("fast").siblings().hide("fast"); 

    }); 

    }); 

而现在的HTML：

 <div id="left"> 
      <UL><h2>DBACO Projects</h2></UL> 
        <div id="headerspace"> 
        </div>    
      <UL ID="links"><LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="QualcommInfo">QUALCOMM BUILDING M PROJECTS</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="StFrancisInfo">ST FRANCIS OF ASSISI CATHOLIC &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY-PHASE 1</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="YumaInfo">YUMA PIVOT POINT HOTEL AND &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONFERENCE CENTER</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="RealtyInfo">REALTY INCOME CORPORATE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HEADQUARTERS</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="CenterCityInfo">CENTER CITY MARRIOTT</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="PalmInfo">PALM MOUNTAIN RESORT</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="TrailsInfo">THE TRAILS AT PALM SPRINGS</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="OtayInfo">OTAY LOGISTICS CENTER</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="CabrilloInfo">CABRILLO MEDICAL OFFICE BUILDING</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="NorthgateInfo">NORTHGATE COMMUNITY CHURCH</A></h6></LI><BR> 
      <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="LomaInfo">LOMA ALTA VILLAGE MOB</A></h6></LI></UL> 
     </div> 

任何的想法如何获得点击的链接采取“当前”的类，同时确保所有其他链接留在类“链接”将不胜感激。

Answer 1

$(document).ready(function() { 
    var $links = $('a'); 
    $links.click(function() { 
     $links.removeClass('current').addClass('link'); 
     $(this).removeClass('link').addClass('current'); 

     var divname= this.name; 
     $("#"+divname).show("fast").siblings().hide("fast"); 
    }); 
}); 

Answer 2

在这里你去http://jsfiddle.net/gHWWX/4/

$(document).ready(function(){ 
    $('a').click(function() { 
     $('a').removeClass('current').addClass('link'); 
     $(this).removeClass('link').addClass('current'); 
     var divname= this.name; 
     $("#"+divname).show("fast").siblings().hide("fast"); 
    }); 
});​ 

小修改

Answer 3

我建议做这种方式：http://jsfiddle.net/3SR7E/

CSS：

.link.current { 
color: #f48239; 

} 
.link { 
color: black; 
text-decoration: none; 

} 

javascript：

$(document).ready(function(){ 
$('a').click(function() { 
var divname= this.name; 
$("#"+divname).show("fast").siblings().hide("fast"); 
$("#links li a").removeClass("current");    
    $(this).addClass("current"); 

}); 

}); 

Answer 4

我不知道你为什么应用“显示”和“隐藏”，但这可能是你想要的。

$(document).ready(function(){ 
    $('a').click(function() { 
     $(this) 
      .removeClass("link") 
      .addClass("current") 
      .siblings("a").removeClass("current"); 
    }); 
}); 

代码只改变css类。

希望它有帮助。