Kann mir jemand sagen, wie man addClass und removeClass tatsächlich meinen Code funktioniert nicht

Question

ich habe einen Fall hier. Wenn ich auf die Schaltfläche klicke, möchte ich, dass die Klasse geändert wird, zum Beispiel, wenn die Schaltfläche angeklickt wird. Ich möchte die Ausblendregisterkarte entfernen und zur gleichen Zeit möchte ich die Show-Tab-Klasse hinzufügen. Das ist mein JQuery-Code. Bitte helft mir dabei

$(document).ready(function() { 
 
    $('#button').on('click', function() { 
 
    $('.form-group').removeClass('hide-tab'); 
 
    $(this).addClass('show-tab'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-container"> 
 
    <form class="fs-form fs-form-full"> 
 
    <div class="form-group"> 
 
     <label class="field">What is your name?</label> 
 
     <input type="text" class="form-control"> 
 
     <div class="border"></div> 
 
    </div> 
 
    <div class="form-group hide-tab"> 
 
     <label class="field">What is your mobile number?</label> 
 
     <input type="text" class="form-control"> 
 
     <div class="border"></div> 
 
    </div> 
 
    <div class="form-group hide-tab"> 
 
     <label class="field">What is your email address?</label> 
 
     <input type="email" class="form-control"> 
 
     <div class="border"></div> 
 
    </div> 
 
    <div class="form-group hide-tab"> 
 
     <label class="field">What type of event do you want us to organize?</label> 
 
     <select class="form-control"> 
 
     <option>Dance Events</option> 
 
     <option>Birthday Events</option> 
 
     <option>Family Gathering Events</option> 
 
     <option>Marathon Events</option> 
 
     <option>Awards Ceremony</option> 
 
     <option>Art Competition</option> 
 
     </select> 
 
     <div class="border"></div> 
 
    </div> 
 
    <div class="form-group hide-tab"> 
 
     <label class="field">Breif your thoughts</label> 
 
     <textarea class="form-control"></textarea> 
 
     <div class="border"></div> 
 
    </div> 
 
    <div class="form-group hide-tab"> 
 
     <label class="field">Schdule Meeting</label> 
 
     <input type="date" class="form-control"> 
 
     <div class="border"></div> 
 
    </div> 
 
    <div class="form_group"> 
 
     <button type="submit" class="btn btn-primary" id="button">Continue</button> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

Da Ihr Button-Typ ist submit .So Änderungen passieren, aber at-once Form verarbeitet wird und alles neu geladen wird. Deshalb können Sie die Änderungen nicht sehen.

Verwenden preventDefault() wie unten: -

$(document).ready(function() { 
    $('#button').on('click', function(e) { 
    e.preventDefault(); 
    $('.form-group').removeClass('hide-tab'); // remove hide-tab class from all elements having form-group class 
    $(this).addClass('show-tab'); // this will add class to the button only not to others 
    }); 
});