单击jquery将特定类添加到元素
我在使用一个简单的导航栏时遇到了问题，当某个页面处于活动状态时，它使用jQuery来添加和删除特定的类。我希望根据单击的ID将一个类附加到我的aLink类中。如果我单击#aboutLink，我希望添加.linkActive，但如果我单击#sasLink，我希望添加.link2Active。我看过的所有教程都添加了一个单独的类，但由于我的两个类是不同的，所以我需要根据单击的ID添加一个特定的类。
HTML：
<div id="mainNav">
<ul id="nav">
<a id="mainLogo" href="/"><li></li></a>
<a id="aboutLink" class="aLink" href="/"><li></li></a>
<a id="sasLink" class="aLink" href="/savings-and-support"><li></li></a>
<a id="external" href="/"><li></li></a>
</ul>
</div><!--/#mainNav-->我知道我的jQuery没有意义，但这是我能想到的全部。从逻辑上讲，我理解它，但我在语法上迷路了。
jQuery：
$(function () {
$(".aLink").click(function () {
if ($(this) == $("#aboutLink")
$(this).addClass('activeLink');
else $(this).addClass('active2Link');
});
});感谢您的任何意见或指导。
回答 3
Stack Overflow用户
发布于 2013-07-24 06:41:33
var idToClass = {
'aboutLink' : 'linkActive',
'sasLink' : 'link2Active'
}
$('#nav a').click(function(){
e.preventDefault();
$(this).addClass(idToClass[this.id]);
});JS Fiddle demo。
相反，您可以使用toggleClass()来允许通过第二次单击删除这些类：
var idToClass = {
'aboutLink' : 'linkActive',
'sasLink' : 'link2Active'
}
$('#nav a').click(function(e){
e.preventDefault();
$(this).toggleClass(idToClass[this.id]);
});JS Fiddle demo。
编辑了以回答问题，来自OP，在评论中，如下：
如何删除类，使两个链接看起来不会同时处于活动状态？
有几种方法，但因为您添加了不同的类名来表示“活动”状态，所以它们的效率有点低。第一种方法是使用暴力方法，有效地查找所有具有class属性的a元素，并将该属性设置为空字符串，然后将linkActive/link2Active类名添加到单击的a元素：
$('#nav a').click(function(e){
e.preventDefault();
var self = $(this);
self.closest('ul').find('a[class]').attr('class', '');
self.toggleClass(idToClass[this.id]);
});JS Fiddle demo。
另一种方法是从idToClass对象中列出其id的元素中删除特定的类。然而，这有点开销，因为它需要遍历对象，检索id，找到具有该id的元素，然后删除class-name：
$('#nav a').click(function(e){
e.preventDefault();
for (var id in idToClass) {
if (idToClass.hasOwnProperty(id)){
$('#' + id).removeClass(idToClass[id]);
}
}
$(this).addClass(idToClass[this.id]);
});JS Fiddle demo。
当然，如果你使用一个通用的类名，那么一切都会变得容易得多：
$('#nav a').click(function (e) {
e.preventDefault();
var self = $(this);
self.closest('ul')
.find('.commonActiveClassName')
.removeClass('commonActiveClassName');
self.addClass('commonActiveClassName');
});JS Fiddle demo。
参考文献：
addClass().closest().event.preventDefault().find().removeClass().toggleClass().
Stack Overflow用户
发布于 2013-07-24 06:40:41
因为您已经有了ID标签，可以方便地引用...我想你想要更多像这样的东西？
$(function () {
$("#aboutLink").click(function () {
$(this).addClass('activeLink');
});
$("#sasLink").click(function () {
$(this).addClass('active2Link');
});
});Stack Overflow用户
发布于 2013-07-24 06:45:01
试着使用下面的代码：
$(function () {
$(".aLink").click(function () {
var currentId = this.id;
if ( currentId == "aboutLink"){
$(this).addClass('activeLink');
else if( currentId == "sasLink") {
$(this).addClass('active2Link');
}
});
});https://stackoverflow.com/questions/17822180
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号