Question

我可以成功显示要显示和隐藏的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>

Answer 1

根据您对问题的评论

HTML在表单内

这就是问题所在。默认情况下，所有button元素都属于type="submit"，因此，当单击它们时，它们将提交父form元素。要停止此操作，请更改为type="button"

<button type="button" class="btn btn-danger form-control" id="c_button">Customer</button>
<button type="button" class="btn btn-info form-control" id="b_button">Branch</button>
<button type="button" class="btn btn-primary form-control" id="s_button">Supplier</button>

Answer 2

首先尝试在代码末尾调用jquery

// call here 
</body>

显示/隐藏功能的问题以某种方式刷新了页面

2 个答案: