使用 Javascript 单击添加和删除类

Question

I actually don't often use Javascript and don't know much about coding with it, so I want to excuse this question, if it is a simple one!

I have this html elements:

<button class="btn"></button>

<div class="section1 active" style="z-index:1;"></div>

<div class="section2" style="z-index:2;"></div>

Now I would like to add the class "active" to div .section2 and at the same time to remove this class "active" from div .section1 by clicking on the button .btn .

Additionally, on click on button .btn I would like to change the style attribute "z-index:1" from .section1 to "z-index:2" and at the same time to change "z-index:2" from .section2 into "z-index:1"

Could someone please give me a full javascript code that would change the classes and style attributes when I click the button?

Thank you :)

Answer 1

 $('.section1').click(function(){ $('.section1').removeClass('active').html('CLICK FOR ACTIVE').css('z-index', 1); $(this).addClass('active').html('ACTIVE').css('z-index', 2); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="section1 active" style="z-index:1;">CLICK FOR ACTIVE</div> <div class="section1" style="z-index:2;">ACTIVE</div>