誰能告訴我如何使用addClass和removeClass實際上我的代碼不起作用

Question

我在這里有一個案例。 當單擊按鈕時，我希望更改類，例如，如果單擊按鈕，則希望刪除隱藏標簽，同時我想添加顯示標簽類，這是我的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
  });
});