Question

当使用jQuery单击div时，我正在尝试向div添加“活动”类。基本上，我想添加一个活动的CSS类，以便状态按钮保留唯一的颜色（或悬停类）。

不幸的是，该类从未添加。我也尝试过切换功能，并将功能放在不同的区域。我也尝试绑定。似乎什么也没有。我对此很陌生，并且在这里浏览了类似的帖子，但找不到答案。

此外，如何设置默认班级？我希望其中一个元素在页面加载时默认具有“活动”类，而不是通过单击来实现。

这是我尝试过的最新内容：

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>

谢谢您的帮助。

Answer 1

为什么会有两个点击事件？我认为您应该加入逻辑并为点击使用唯一事件。

此外，您在第一个事件中还有一个额外的结局。

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");
});

Answer 2

问题是您引用的是jQuery(this).addClass("active");，但是CSS中不存在类.active。因此解决方案是这样：

CSS

.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;
}

在您的jQuery中，您正在调用一个类，这不同于伪选择器:active。

通过jQuery将类添加到div onclick

2 个答案: