I'm currently facing an issue with adding a class of "active" to a div upon clicking it using jQuery. My goal is to apply the css class of active in order to give the button a distinct color (or the hover effect.)
Unfortunately, I have been unsuccessful in adding the class. I've experimented with the toggle function and tried placing the functions in different locations. I also attempted using bind. However, nothing seems to work. I'm relatively new to this and despite searching similar posts here, I couldn't find a solution.
Furthermore, how can I set the default class? I'd like one of the elements to automatically have the 'active' class when the page loads without requiring a click.
Below is the most recent attempt that I've made:
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>I appreciate any assistance you can provide.