添加/删除类 onClick Jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10239096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add/Remove Class onClick Jquery
提问by user1345405
I have looked at what seems to be a million examples of how to get the link a user clicks to change class, while ensuring the sibling links take their original class. I am very new to jQuery so admittedly I am lost when I try these different examples. Here is my css:
我已经查看了似乎有一百万个关于如何获取用户单击以更改类的链接的示例，同时确保兄弟链接采用其原始类。我对 jQuery 很陌生，所以无可否认，当我尝试这些不同的例子时，我迷路了。这是我的CSS：
/*active link */
.current {
color: #f48239;
text-decoration: none;
}
/* inactive link*/
.link {
color: black;
text-decoration: none;
}
jQuery Function that only shows the div content that corresponds to the link being clicked:
只显示与被点击链接对应的 div 内容的 jQuery 函数：
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("fast").siblings().hide("fast");
});
});
And now the HTML:
现在是 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 COMMUNITY-PHASE 1</A></h6></LI><BR>
<LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="YumaInfo">YUMA PIVOT POINT HOTEL AND CONFERENCE CENTER</A></h6></LI><BR>
<LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="RealtyInfo">REALTY INCOME CORPORATE 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>
Any ideas on how to get the link clicked to take the class of "current" while ensuring all the other links stay with the class of "link" would be greatly appreciated.
关于如何点击链接以获取“当前”类同时确保所有其他链接保持“链接”类的任何想法将不胜感激。
回答by Matt Ball
$(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");
});
});
回答by Soe Moe
I am not sure why you apply "show" and "hide", but this might be what you want.
我不确定你为什么应用“显示”和“隐藏”，但这可能是你想要的。
$(document).ready(function(){
$('a').click(function () {
$(this)
.removeClass("link")
.addClass("current")
.siblings("a").removeClass("current");
});
});
The code only does changing the css class.
该代码仅更改 css 类。
Hope it helps.
希望能帮助到你。
回答by Dylan Cross
I would suggest doing it this way: http://jsfiddle.net/3SR7E/
我建议这样做：http: //jsfiddle.net/3SR7E/
css:
css：
.link.current {
color: #f48239;
}
.link {
color: black;
text-decoration: none;
}
javascript:
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");
});
});
回答by user1289347
here you go http://jsfiddle.net/gHWWX/4/
在这里你去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");
});
});?
minor edit
次要编辑
