How to add/hide classes clicking?

Originally #home1 class .active-content
I need to by clicking on the link to home2, class #home1 retired and assigned to #home2

<ul class="navigation">
 the <li><a href="#home1">home1</a></li>
 the <li><a href="#home2">home2</a></li>
 the <li><a href="#home3">home3</a></li>
</ul>


<div id="content">
 <section id="home1" class="active-content">
 Lorem ipsum dolor1
</section>
 <section id="home2">
 Lorem ipsum dolor2
</section>
 <section id="home3">
 Lorem ipsum dolor3
</section>
</div>






<style>


#home1, #home2, #home3{
 display: none;
}

.active-content{
 display: block !important;
}




</style>
April 3rd 20 at 17:21
1 answer
April 3rd 20 at 17:23
Solution
Js. I use JQuery. There are 2 options - first static, the second dynamic. On a very... An here is the second (to the eye):
$('.navigation li a').on('click', function(e) {
 //e.preventDefault(); - uncomment if you don't want to change the hash
 $('#content-section').removeClass('active-content'); // clean all partitions from the class of active-content
 $('#content section ' + e.href).addClass('active-content'); // if not roll out, try $(e).attr('href') and chikni value if there is #
});

Find more questions by tags Web Development