通过jQuery将类添加到div onclick
通过jQuery将类添加到div onclick
提问于 2019-03-12 07:53:20
当使用jQuery单击时，我尝试将一个"active“类添加到div中。基本上，我想添加一个活动的css类，以便状态按钮保留唯一的颜色(或悬停类)。
不幸的是，这个类从未被添加过。我也尝试了切换函数，并将函数放在不同的区域。我也尝试过bind。似乎什么都没有发生。我在这方面还是个新手，我在这里看过类似的帖子，但找不到答案。
另外，如何设置默认类？我希望其中一个元素在页面加载时默认具有“活动”类，而不是通过单击。
以下是我尝试过的最新内容：
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('.div'+$(this).attr('target')).show();
});
});
jQuery(".showSingle").click(function(){
jQuery(".showSingle").removeClass("active");
jQuery(this).addClass("active");
});.cool-button-link {
padding: 10px 15px;
margin: 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.cool-button-link:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.cool-button-link:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons" style="text-align: center;">
<span style="color: #ffffff; font-size: 18pt;">
<a class="showSingle cool-button-link" style="color: #ffffff;" target="1" rel="noopener noreferrer" onmouseover="this.style.color='#2ea3f2';"onmouseout="this.style.color='white';">Florida </a>
<a class="showSingle cool-button-link" style="color: #ffffff;" target="2" rel="noopener noreferrer" onmouseover="this.style.color='#2ea3f2';"onmouseout="this.style.color='white';">Illinois </a>
<a class="showSingle cool-button-link" style="color: #ffffff;" target="3" rel="noopener noreferrer" onmouseover="this.style.color='#2ea3f2';"onmouseout="this.style.color='white';">Iowa </a>
<a class="showSingle cool-button-link" style="color: #ffffff;" target="4" rel="noopener noreferrer" onmouseover="this.style.color='#2ea3f2';"onmouseout="this.style.color='white';">Kansas </a>
</span>
</div>
<div id="div1" class="targetDiv div1">Jacksonville</div>
<div id="div2" class="targetDiv div2">Springfield</div>
<div id="div3" class="targetDiv div3">Des Moines</div>
<div id="div4" class="targetDiv div4">Wichita</div>
谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-12 07:59:32
为什么会有两个单击事件？我认为你应该加入逻辑，为点击使用一个独特的事件。
此外，在第一个事件中还有一个额外的结束语。
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('.div'+$(this).attr('target')).show();
});
jQuery(".showSingle").click(function(){
jQuery(".showSingle").removeClass("active");
jQuery(this).addClass("active");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55112081
复制相关文章
相似问题