首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Bootstrap3中,在按钮上单击make one div display和另一个div hide

在Bootstrap3中,可以通过以下方式实现在按钮上单击使一个div显示,同时隐藏另一个div:

  1. 首先,确保在HTML文件中引入了Bootstrap的CSS和JavaScript文件。
代码语言:html
复制
<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>
  1. 创建两个div,并为它们分别设置一个唯一的ID。
代码语言:html
复制
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
  1. 创建一个按钮,并为其添加一个点击事件。
代码语言:html
复制
<button id="btn">Click me</button>
  1. 使用JavaScript代码来实现点击按钮时的显示和隐藏效果。
代码语言:javascript
复制
$(document).ready(function(){
    $("#btn").click(function(){
        $("#div1").show();
        $("#div2").hide();
    });
});

在上述代码中,我们使用了jQuery库来简化DOM操作。当按钮被点击时,通过选择器选中对应的div元素,并使用show()hide()方法来分别显示和隐藏它们。

这样,当你在Bootstrap3中点击该按钮时,div1将会显示,同时div2将会隐藏。

关于Bootstrap3的更多信息和使用方法,你可以参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JQuery事件处理

    Jquery事件 1、  绑定事件示例代码: 绑定事件

    什么是绑定事件?这是隐藏的内容,点击上面的内容会显示这里的内容。
    <script language=”javascript”> //单击显示,再次点击隐藏 /*$(function(){ $(“a”).bind(‘click’,function(){ if($(this).next().is(“:visible”)){ $(this).next().h

    05
    领券