我可以成功显示要显示和隐藏的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>
根据您对问题的评论
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句