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

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

相关·内容

关于“Python”的核心知识点整理大全61

div是网页的一部分,可用于任何目的, 并可通过边框、元素周围的空间(外边距)、内容边框之间的间距(内边距)、背景色其他样 式规则来设置其样式。...请尝试调整窗口的大小,使其非常窄;此时导航栏将变成一个按钮,如果你单击这个按钮,将打 开一个下拉列表,其中包含所有的导航链接。...}}(见3),并使用bootstrap3结构来定义提交按钮 (见4)。...2处,我们创建了一个面板式div元素(而不是将每个条目作为一个列表项),其中 包含两个嵌套的div:一个面板标题(panel-heading)div(见3)一个面板主体(panel-body) div...我们将让“学习笔记”Heroku运行。 Windows系统的部署过程与LinuxOS X系统稍有不同。

16010

❤️使用 HTML、CSS JS 创建响应式可过滤的游戏+工具展示页面 ❤️

单击这些类别的任何一个时。然后可以看到该类别的所有作品,而隐藏其余作品。结果,用户可以轻松地找到他选择的图像。 我首先在网页创建了一个导航栏。在这里创建了五类按钮,一共使用了15张图片。...导航栏的分类,你可以看到与您点击的分类相关的作品。同样,当您单击另一个类别时,该类别的作品将被看到,其余的将被隐藏。我让它完全响应,以便它可以在所有设备使用。...类别的文本具有按钮的形状。这些按钮的文字是font-size: 17px 并且颜色是白色的。 Border: 2px solid white 用于制作按钮大小的文本。...第一个 div ( ) 给出了所使用的类别。这里我为每个图像使用了两个 div。...当你单击一个类别时,这些类别的每一个都将与图像并排显示。例如,如果您单击具有四个图像的类别。第一行有两个图像,第二行有两个图像。

6.5K20
  • JavaWeb——JQuery之高级案例实战(打开网页自动弹出广告效果、抽奖效果实现)

    display; 3)使用 show/hide方法来完成广告的显示; 【代码实现】: <img style="width:100%" src=".....2 抽奖效果实现 【需求】: 1)点击开始<em>按钮</em>,小相框<em>中</em>滚动图片; 2)点击停止<em>按钮</em>,小相框停止滚动,大相框<em>中</em>显示选中的图片; 【分析】: 1) 给开始<em>按钮</em>绑定<em>单击</em>事件: 定义循环定时器、 切换小相框的...src属性(定义数组,存放图片资源路径、生成随机数作为数组索引); 2) 给结束<em>按钮</em>绑定<em>单击</em>事件:停止定时器、给大相框设置src属性; 【代码实现】: <!...给结束<em>按钮</em>绑定<em>单击</em>事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果

    2.3K40

    jQuery基础

    单击“关闭”按钮时,页面的图片关闭按钮不显示 var img1 = document.getElementById("close...,单击“发送”按钮页面上显示聊天内容,左侧显示聊天者头像,右侧显示聊天昵称聊天信息,使用assClass()方法为聊天内容添加背景色,边框为圆角,聊天内容发送完毕后,内容显示聊天区域,输入框内容清空...如果聊天内容过多,则聊天内容显示区域垂直方向显示滚动条 如果输入框没有输入内容,则单击发送按钮,不做任何操作 关键代码: $...{ window.close(); } }) 上机练习3 制作课工场论坛发贴 需求说明; 单击“我要发帖”按钮,弹出发帖界面 标题框输入标题...,选择所属板块,输入帖子内容 单击“发布”按钮,新发布的帖子显示列表的第一个,新帖子显示头像,标题,板块发帖时间 关键代码:

    7.4K10

    用Vue.js开发一个电影App的前端界面

    一个电影预告片屏幕,电影播放时显示电影的预告片。 可以将电影添加到收藏夹 我们将创建应用程序,让页脚随时出现,而首页、电影电影预告片将共享相同的屏幕。...我们引入了另一个router-link,,影片的播放按钮,创建一个目标位置的'/' + $route.params.id + '/trailer'。...这基本用/trailer扩展了电影ID的当前路径预告片,是对我们最后的电影预告片组件的导航。 到目前为止,我们应用程序的电影组件应该如下所示: ? 令人惊叹的。...我们还需要为Movie组件的“添加到收藏夹”按钮创建事件处理程序。...“添加到收藏夹”按钮从addToFavorites()方法处理简单的切换即当单击某一部电影的favorite时,文本之间切换“添加”“删除”基于电影是否已添加或删除收藏夹(hide类是创建类设置display

    4K10

    jQuery (二)

    下方的是将函数f注册命名空间myMond $('p').bind('mouseover.myMod', f); 下方的是将函数f注册到命名空间yourModmouseout $('p').bind...; // 触发没有命名空间的单击处理程序 或者如下 // 单击一将会触发二的事件 $('#button1').click((e) => {$('#button2').trigger('button2'...使用工具函数完成全部的选择 https://api.jquery.com/category/events/event-object/ 自定义事件 一个栗子,实现发布订阅模型,先全体元素广播一个事件,单击一个按钮的时候...width: ['hide', 'linear'], height: ['hide', 'linear'], opacity: 'hide' }) 动画取消,延迟队列 stop() 将会停止当前选中元素的任何动画...将选中的元素集用做上下文 即交并补 $('div').find('p'); // div查找p元素 $('#header, #footer').find('p'); // 寻找id为header

    9.3K30

    jquery版购物车源代码

    shop.jsp页面代码CSS代码在上课的时间已经下发,就不重复发了 效果图: 鼠标移入图片时可以浏览大图 // JavaScript Document $(function() { //计算并显示总价...calTotal(); //删除 var delUlId;//保存要删除的无序列表的id属性值 //单击“删除”链接 $(".btnDel").click(function(){ showMask()...dialog").show();//显示提示框 delUlId=$(this).parents("ul").attr("id"); //获取元素的祖先元素后,保存要删除的员工所在行的id属性值 }); //单击提示框的关闭图片取消按钮...$("#closePic,#btnCancel").click(function(){ $("div.dialog").hide();//提示框关闭 $("div.mask").hide(); //遮罩层关闭...").css({ height: bh + "px", //设置遮罩层的高度,覆盖整个页面内容 width: bw + "px", display: "block" }); } //算总价 function

    2.2K80
    领券