谁能告诉我如何使用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
  });
});