How to jQuery Add/Remove Class in WordPress

How to jquery to add and remove multiple classes in wordpress page- jQuery modify the CSS classes given to HTML elements, jQuery provides many methods such as addClass(), removeClass(), toggleClass(), etc. Here is an example where the class is added when the user on clicks a class .tab1 after then class will be added this one .yourClass on your tabs designs and .yourClass class you can do change your according as you like.
The following custom code jquery to on-click add and remove class for first you need to include jQuery CDN Url (library file) on wordpress header.php or footer.php files on your wordpress website and then below custom js code of copy and paste on your webpage.
The classes will be added and removed when the user on clicks the tabs buttons,We have total 4 tabs classes as .tab1, tab2, tab3, .tab4, we are doing custom multiple tabs classes with add/remove on-click to jquery, and wordpress developer easily can do used this one code anywhere on page and make custom tabs button for wordpress website.

How to add and remove classes in jquery for wordpress site

jQuery on-click add/remove multiple classes in wordpress page

Note: If your using this code in wordpress page don't change "jQuery" to "$" sign, becasue wordpress (cms) not supported "$" sign, so we will always used "jQuery" for wordpress page. The following is the jquery to add/remove classes on-click for multiple tabs, this code already tested and it's code working.

<script>
jQuery(document).ready(function(){
jQuery(".tab1").click(function(){
jQuery(".tab1").addClass("yourClass");
jQuery(".tab2").removeClass("yourClass");
jQuery(".tab3").removeClass("yourClass");
jQuery(".tab4").removeClass("yourClass");
});
jQuery(".tab2").click(function(){
jQuery(".tab2").addClass("yourClass");
jQuery(".tab1").removeClass("yourClass");
jQuery(".tab3").removeClass("yourClass");
jQuery(".tab4").removeClass("yourClass");
});
jQuery(".tab3").click(function(){
jQuery(".tab3").addClass("yourClass");
jQuery(".tab1").removeClass("yourClass");
jQuery(".tab2").removeClass("yourClass");
jQuery(".tab4").removeClass("yourClass");
});
jQuery(".tab4").click(function(){
jQuery(".tab4").addClass("yourClass");
jQuery(".tab1").removeClass("yourClass");
jQuery(".tab2").removeClass("yourClass");
jQuery(".tab3").removeClass("yourClass");
});
});
</script>

Conclusion!

This article is to jQuery add and remove multiple classes on click for wordpress page, So the above code is about How to jquery add/remove class in WordPress website, We hope by this article you can do it easily jQuery to on-click multiple classes used in tabs on your webpage.