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

由于您的按钮类型是提交。因此会发生更改，但会立即处理表单并重新加载所有内容。这就是您无法看到更改的原因。

使用 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
  });
});