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

在单击按钮时隐藏div元素,并用另一个div替换它,而不使用jquery

在单击按钮时隐藏div元素,并用另一个div替换它,而不使用jQuery,可以通过纯JavaScript来实现。

首先,在HTML中定义两个div元素,一个是要隐藏的div,另一个是要替换的div。给按钮添加一个点击事件,当按钮被点击时,隐藏div元素并显示替换的div元素。

HTML代码示例:

代码语言:txt
复制
<div id="divToHide">要隐藏的内容</div>
<div id="divToReplace" style="display: none;">要替换的内容</div>
<button onclick="replaceDiv()">点击按钮</button>

然后,在JavaScript中编写替换div的函数replaceDiv(),该函数将隐藏要隐藏的div元素并显示要替换的div元素。

JavaScript代码示例:

代码语言:txt
复制
function replaceDiv() {
  var divToHide = document.getElementById("divToHide");
  var divToReplace = document.getElementById("divToReplace");
  
  divToHide.style.display = "none";
  divToReplace.style.display = "block";
}

以上代码中,通过getElementById()方法获取要隐藏的div元素和要替换的div元素,并分别赋值给变量divToHide和divToReplace。然后,通过修改元素的style.display属性,将要隐藏的div元素设置为"display: none;",将要替换的div元素设置为"display: block;",实现隐藏和显示的效果。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。

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

相关·内容

Web阶段:第五章:JQuery

Jquery 的初体验 需求:使用Jquery和javascript给一个按钮绑定单击事件 注意:使用Jquery之前要将第三方jar包导入 <!..."); } } //使用Jquery给一个按钮绑定单击事件,Jquery中的$()代替window.onload...,(单位是毫秒) 第二个参数是 动画执行完成的回调函数 hide() 隐藏可见的元素 第一个参数是 动画执行的时候,(单位是毫秒) 第二个参数是 动画执行完成的回调函数 toggle() 可见就隐藏...jquery动画定义了很多种动画效果,可以很方便的使用这些动画效果 练习:CSS_动画 品牌展示 需求: 1.点击按钮的时候,隐藏和显示卡西欧之后的品牌...jquery的页面加载完成之后,会把所有注册了函数都按照注册的顺序,依次全部执行。 事件 **click()** 绑定单击事件。触发单击事件 **mouseover()** 绑定鼠标移入事件。

26.3K20
  • 一文深入JQuery

    广告显示和隐藏 抽奖 插件:增强JQuery的功能 实现方式: 动画 三种方式显示和隐藏元素 默认显示和隐藏方式 show([speed,[easing],[fn]]) 参数: speed:动画的速度...对象.each(function(index,element){}); index:就是元素集合中的索引 element:就是集合中的每一个元素对象 this:集合中的每一个元素对象 回调函数返回值:...for(元素对象 of 容器对象) 事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,传递回调函数,则会触发浏览器默认行为。...使用定时器来完成。setTimeout (执行一次定时器) 2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果 $("#startID").prop("disabled"

    3.3K30

    python测试开发django-188.Bootstrap折叠(Collapse)插件

    可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠(Collapse) 以使用带有属性的链接href或带有属性的按钮data-target。...单击下面的按钮以通过类更改显示和隐藏另一个元素: .collapse隐藏内容 .collapsing在过渡期间应用 .collapse.in显示内容 实现效果,默认展开 点击按钮后展开文本 如果想默认展开,可以通过 .collapse.in 属性控制 <div class="collapse...可折叠元素实际显示或隐藏之前(即在or事件发生之前)返回给调用者。shown.bs.collapse, hidden.bs.collapse `.collapse('show') 显示可折叠元素。...可折叠元素实际显示之前(即在事件发生之前)返回给调用者。shown.bs.collapse .collapse(‘hide’) 隐藏可折叠元素

    3K50

    前端基础-JQuery (二)

    三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速度。...用来指定切换效果,默认是"swing",可用参数"linear" * swing:动画执行时效果是 先慢,中间快,最后又慢 * linear:动画执行时速度是匀速的 3. fn:动画完成执行的函数...语法: jquery对象.each(function(index,element){}); * index:就是元素集合中的索引 * element:就是集合中的每一个元素对象...使用 show/hide方法来完成广告的显示 */ //入口函数,页面加载完成之后,定义定时器,调用这两个方法 $(function...给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果

    2.4K10

    JavaWeb——JQuery之高级操作应用及实践案例总结(动画、遍历、事件绑定)

    1 JQuery动画 JQuery有三种方式显示和隐藏元素: 1)默认显示和隐藏方式:       --show([speed, [easing], [fn]])       --hide([speed...2 JQuery遍历 js的遍历方式是使用for循环,JQuery提供了三种遍历方式: 1)JQuery对象.each(callback):回调函数中的参数 index(索引) element(元素对象...,当点击对应组件,会执行fn1,再次点击会执行fn2...,若只有2个,则循环执行。注意:JQuery1.9后该功能删除了,要使用的话引入jquery-migrate-1.0.0.js插件。..."> $(function () { //1.使用on给按钮绑定单击事件 click $("#btn").on("click",function...使用off解除btn按钮单击事件 $("#btn2").click(function () { //解除btn按钮单击事件

    9.4K20

    JQuery高级应用

    或表示动画时长的毫秒数值(如:1000) easing:用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是 先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:动画完成执行的函数..."button" value="点击按钮隐藏div" onclick="hideFn()"> <input type="button" value="点击<em>按钮</em>显示<em>div</em>" onclick="showFn...jq的遍历方式 jq对象.each(callback) 语法: <em>jquery</em>对象.each(function(index,element){}); index:就是<em>元素</em><em>在</em>集合中的索引 element:就是集合中的每一个<em>元素</em>对象...javascript"> $(function () { //使用on给按钮绑定单击事件 click $("#btn...}) ; //使用off解除btn按钮单击事件 $("#btn2").click(function (

    5.9K30

    jQuery动画】显示与隐藏效果

    easing:切换效果(过渡效果),默认过渡效果为swing,还可以使用linear效果。 fn:动画完成执行的函数。...HTML、CSS部分 思路: 1、定义显示、隐藏、切换三个功能按钮,定义div元素; 2、设置div元素的样式,宽度、高度和背景颜色。.../button> jQuery部分 思路: 1、引入jQuery,如图 2、添加ready函数,ready是jQuery的文档就绪函数,它用于防止文档完全加载之前允许...jQuery代码,如果在文档没有完全加载之前就运行函数,操作可能失败; 3、给三个按钮添加点击事件,这里用到筛选选择器eq; 4、实现单击显示按钮,控制div元素的显示(show),并弹出提示框(alert...); 5、实现单击隐藏按钮,控制div元素隐藏(hide),并弹出提示框; 6、实现单击切换按钮,控制元素显示与隐藏切换(toggle)。

    6.7K10

    第51次文章:JQuery高级

    JQuery 高级 一、动画 1、三种默认方式显示和隐藏元素 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,...或表示动画时长的毫秒数值(如:1000) easing:用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是:先慢 中间快,最后又慢 linear:动画执行时速度是匀速的 fn:动画完成执行的函数...setTimeout(执行一次定时器) 分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值 使用 show/hide方法来完成广告的显示 (3)代码实现 <!...给结束按钮绑定单击事件 停止定时器 给大相框设置src属性 (3)代码实现 <!...插件,插件里面定义了两个方法,分别是check()和uncheck(),然后再给两个单击按钮绑定不同的方法事件。

    3.6K30

    Jump Start Bootstrap 第4章

    这个ul元素应该有类”dropdown-menu”。现在,我们有了一个简单的下拉菜单,单击链接显示菜单。我们可以浏览器中查看,如图所示。 ?...Bootstrap为下拉插件提供了一些附加事件,它们是: show.bs.dropdown: 这个事件句柄被单击触发;下拉句柄收到请求去显示隐藏菜单; shown.bs.dropdown: 这个事件菜单被显示触发...当你点击按钮,你会看到一个类似于插图效果的样式;再次单击返回到原来的样式,如图所示。data-toggle=”button”实现了这个切换功能。 ?...添加data-dismiss使按钮单击关闭模式对话框。 对于本体,我们需要一个包含类modal-body的元素。您可以将几乎任何内容放到该元素中。...Bootstrap模式对话框有一个选项,当单击该句柄,将该链接加载到的modal-body元素中。这个特性默认情况下是关闭的。

    28.3K40

    Jump Start Bootstrap 第3章

    我们还将在”navbar-header”元素中放置一个隐藏按钮,只导航栏折叠的小屏幕中可见。...data-toggle告诉代码点击按钮做什么,data-target表明单击哪个部分要切换。...当单击按钮,该部分将被切换。按钮中的span元素用来显示图标【注:图标中的横线】。 我们还定义了一个具有类”navbar-brand”的元素,该元素拥有我们网站的名称(SitePoint)。...这里有一些按钮可以用的帮助类: btn-block: 按钮跨域整行所有的网格 active:按钮显示成被点击的状态 disabled:按钮不可用,并显示成褪色状态;你要小心使用这个类,因为它将防止输入和按钮元素单击动作...代码中,我们已经根据Bootstrap的规则,将表单的类从”form”替换为”form-horizontal”。然后我们元素中添加了一个类”col-xs-2”,因此跨越两个网格。

    13.9K20

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    事件,触发 和元素上的 click事件.当单击 元素,只触发 元素上的click事件, 触发元素上的click事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素,只会触发span元素上的click事件,不会触发 div元素和body元素的click事件....可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 jquery中,提供了preventDefault...举一个例子,项目中,经常需要验证表单,单击”提交”按钮是,验证表单内容,例如元素是否是必填字段,某元素长度是否够6位,单表单不符合提交条件,要阻止表单的提交 eg: $(“#sub”).bind(...跨域:一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

    8.3K20

    JQuery最全常用方法指南

    slideUp(speed, [callback]) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素隐藏完成后可选地 触发一个回调函数。...集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象, get(n)和索引返回的是dom元素对象。...对于jquery对象只能使用jquery的方法,dom对象只能使用dom的方法,如要获取第三个 元素的内容。...//如果存在(不存在)就删除(添加)名称为select的class 9、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法,我们无需html元素上直接写事件,可以直接为通过jquery...使用jquery中的jQuery.noConflict(); 方法即可把变量$的控制权让渡给第一个实现的那个库或之前自定义的$方法。

    11K31

    如何在 React 中点击显示或隐藏另一个组件?

    本文中,我们将介绍如何使用 React 来实现点击显示或隐藏另一个组件。我们将首先讨论如何使用 React 状态管理来控制组件的可见性,然后介绍如何使用事件处理机制来响应用户交互。...然后,我们组件的返回值中渲染一个按钮和一个条件渲染的 div 元素。当用户单击按钮,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...当用户单击菜单按钮,菜单应该出现,然后当用户单击菜单外部,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单的显示和隐藏。...显示/隐藏模态框我们可以使用事件处理函数来触发模态对话框的显示或隐藏。当用户单击打开模态框的按钮,模态框应该出现;当用户单击关闭按钮或模态框之外,模态框应该消失。...当用户单击关闭按钮,我们将可见性设置为 false,模态对话框将被隐藏。小结在本文中,我们介绍了如何使用 React 来实现点击显示或隐藏另一个组件。

    4.9K10

    jQuery (二)

    使用jQuery处理事件 事件处理 一个栗子,单击p背景变成灰色 由于es6的箭头函数不支持this的绑定,所以无法使用箭头函数,只能使用匿名函数 html <!...'gray'); }); 效果 [20180821_175532.gif] 或者使用第二个参数,添加相关的属性,完成事件的相关触发 // 单击任意p,使其背景变成灰色 $('', { src.../ 自定义事件 一个栗子,实现发布订阅模型,先全体元素广播一个事件,单击一个按钮的时候 $('#logoff').click(() => { $.event.trigger('logoff')...$('div').js_jquery(); // 直接使用加载的类库 }) 底层是使用XMLHttmpRequest对象来获取将要执行的脚本内容,然后将内容添加到script元素内部。...将选中的元素集用做上下文 即交并补 $('div').find('p'); // div中查找p元素 $('#header, #footer').find('p'); // 寻找id为header

    9.3K30
    领券