After mastering the use of JQuery to manipulate CSS properties with buttons, I am now attempting to create buttons that can add or remove CSS classes. I found a helpful tutorial on this topic at http://www.w3schools.com/jquery/jquery_css_classes.asp
Unfortunately, my code doesn't seem to be working as expected. Here is the script in the head section:
<script>
$(document).ready(function(){
$("button#31").click(function(){
$(".Page1").addClass("georgia nite");
});
});
</script>
<script>
$(document).ready(function(){
$("button#32").click(function(){
$(".Page1").toggleClass("georgia nite");
});
});
</script>
<style>
.georgia { font-family: Georgia; }
.nite { background: #000; color: #fff; }
</style>
(The "Page1" represents the name of a class assigned to a div...)
<div id="page-content-wrapper" class="Page1">
Below is the code within my body section...
<button id="btn31">Add Class</button>
<button id="btn32">Toggle</button>
In addition, I've included the new styles ("georgia" and "nite") in my style sheet for good measure. However, when I click the "Add Class" or "Toggle" buttons, nothing happens. Can anyone point out what might be incorrect in my approach?