Hinzufügen und Entfernen von Klasse On Klicken Sie auf Javascript

Question

Ich benutze eigentlich nicht oft Javascript und weiß nicht viel über die Codierung damit, also möchte ich diese Frage entschuldigen, wenn es eine einfache ist!

Ich habe diese HTML-Elemente:

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

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

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

Nun würde Ich mag die Klasse „aktiv“ hinzufügen .section2 und zugleich div diese Klasse „aktiv“ von div .section1 zu entfernen, indem Sie auf auf der Schaltfläche .btn.

Außerdem, wenn ich auf die Schaltfläche .btn klicke, möchte ich das Stilattribut "z-index: 1" von .section1 auf "z-index: 2" ändern und gleichzeitig den "z-index: 2 "aus .section2 in" z-index: 1 "

Könnte mir bitte jemand einen vollständigen JavaScript-Code geben, der die Klassen- und Stilattribute ändert, wenn ich auf die Schaltfläche klicke?

Danke

Answer 1

$('.section1').click(function(){ 
 
\t $('.section1').removeClass('active').html('CLICK FOR ACTIVE').css('z-index', 1); 
 
\t $(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>