Проблема с функцией show / hide как-то обновляет страницу

Dumm My спросил: 11 марта 2019 в 07:27 в: jquery

Я могу успешно показать div, который хочу показать и скрыть, но исчезает, как только показывает. Похоже, страница обновляется по какой-то причине.

Вот пример кода. Div не должен исчезать, когда я щелкаю по нему.

$(document).ready(function() {
  $("#c_button").click(function() {
    $("#c_show").show();
  });
  $("#b_button").click(function() {
    $("#b_show").show();
  });
  $("#s_button").click(function() {
    $("#s_show").show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-4">
    <div class="form-group form-inline">
      <button class="btn btn-danger form-control" id="c_button">Customer</button>
      <button class="btn btn-info form-control" id="b_button">Branch</button>
      <button class="btn btn-primary form-control" id="s_button">Supplier</button>
    </div>
  </div>

  <!-- 
    these are the divs I want to show
    Note: the divs should be hidden by default
  -->
  <div class="col-sm-4" id="c_show" style="display:none;">
    <div class="form-group form-inline">
      <label>Customer: </label>
      <input type="text" name="samp1" class="form-control">
    </div>
  </div>
  <div class="col-sm-4" id="b_show" style="display:none;">
    <div class="form-group form-inline">
      <label>Branch: </label>
      <input type="text" name="samp2" class="form-control">
    </div>
  </div>
  <div class="col-sm-4" id="c_show" style="display:none;">
    <div class="form-group form-inline">
      <label>Supplier: </label>
      <input type="text" name="samp3" class="form-control">
    </div>
  </div>
</div>

0 ответов