首页
学习
活动
专区
工具
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的更多信息和使用方法,你可以参考腾讯云的相关产品和文档:

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

相关·内容

弱弱地写了一篇前端教程

分享一篇最近学习总结的前端表格制作教程,先看下方截图,具体演示的功能虽然简单,不过很有实际意义,主要涵盖表格展示数据、删除数据、修改数据、分页、模态窗等常见功能,其中也涉及一些样式的调整,比如隔行变色,此类文章网上很多很多,我也看过不少,但是网上文章都存着一个问题:很多文章代码写的很笼统,跳跃性比较大,你可能哪怕有一个地方看不懂,不知道怎么修改,程序就运行不起来,得不到想要的表格效果和功能,而此篇文章,我会尽可能详细介绍我做的功能的每一步是怎么得来的,并且本文源码也完全开源分享,运行中如果有任何问题,也欢迎留言提一些建议

01
领券