誰でもaddClassとremoveClassの使い方を教えてもらえますか？実際に私のコードは動作していません。

Question

私はここにケースがあります。ボタンをクリックしたときにクラスが変更されるようにしたい場合ボタンがクリックされた場合は非表示のタブを削除したいと同時に私はshow-tabクラスを追加したいこれは私のjqueryコードです

$(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

あなたのボタンタイプはsubmit。だからの変化が起こるが、アットワンスフォームが処理され、すべてが再ロードされているので。そのため、あなたは変更を見ることができません。以下のような

利用preventDefault()： - ボタンに

$(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 
    }); 
});