在Bootstrap3中,可以通过以下方式实现在按钮上单击使一个div显示,同时隐藏另一个div:
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<button id="btn">Click me</button>
$(document).ready(function(){
$("#btn").click(function(){
$("#div1").show();
$("#div2").hide();
});
});
在上述代码中,我们使用了jQuery库来简化DOM操作。当按钮被点击时,通过选择器选中对应的div元素,并使用show()
和hide()
方法来分别显示和隐藏它们。
这样,当你在Bootstrap3中点击该按钮时,div1将会显示,同时div2将会隐藏。
关于Bootstrap3的更多信息和使用方法,你可以参考腾讯云的相关产品和文档:
bootstrap 模态框默认会在屏幕顶端显示,跟我们的操作习惯不太符合,我们期望显示到屏幕垂直居中的位置。
在最新的 bootstrap4 版本中可以在
领取专属 10元无门槛券
手把手带您无忧上云