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

如何使用相同的按钮切换两个元素(无JQuery)

使用相同的按钮切换两个元素可以通过原生JavaScript来实现。以下是一种可能的实现方式:

HTML部分:

代码语言:txt
复制
<button id="toggleButton">切换元素</button>
<div id="element1">元素1</div>
<div id="element2">元素2</div>

JavaScript部分:

代码语言:txt
复制
// 获取按钮和两个元素的引用
var toggleButton = document.getElementById("toggleButton");
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");

// 定义一个变量来跟踪当前显示的元素
var currentElement = element1;

// 给按钮添加点击事件监听器
toggleButton.addEventListener("click", function() {
  // 切换元素的显示状态
  if (currentElement === element1) {
    element1.style.display = "none";
    element2.style.display = "block";
    currentElement = element2;
  } else {
    element1.style.display = "block";
    element2.style.display = "none";
    currentElement = element1;
  }
});

上述代码中,首先通过getElementById方法获取按钮和两个元素的引用。然后定义一个变量currentElement来跟踪当前显示的元素,默认为element1。接下来,给按钮添加一个点击事件监听器,当按钮被点击时,切换元素的显示状态。如果当前显示的是element1,则隐藏element1并显示element2,并更新currentElementelement2;如果当前显示的是element2,则隐藏element2并显示element1,并更新currentElementelement1

这样,当点击按钮时,两个元素会交替显示和隐藏,实现了使用相同的按钮切换两个元素的效果。

请注意,上述代码仅为示例,实际应用中可能需要根据具体需求进行适当的修改和优化。

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

相关·内容

  • 【Java 进阶篇】JQuery 事件绑定之事件切换:让页面动起来

    无论你是前端小白还是有一定经验开发者,相信这篇文章都会对你有所帮助。 走进事件切换奇妙世界 事件切换JQuery 提供一项强大功能,它使得我们可以在同一个元素上轻松切换不同事件处理函数。...这个方法接受两个或多个函数作为参数,每次触发事件时,它会依次调用这些函数。这就意味着,你可以在同一个元素上定义多个不同事件处理逻辑。 让我们通过一个简单例子来看看基本语法: <!...这时,可以使用 data 方法来在元素上存储数据。 <!...每次点击按钮时,根据当前状态不同,会弹出不同提示框,并修改状态值。另外,我们通过点击事件展示了如何获取当前状态。 切换 CSS 类 在页面交互中,改变样式是常见需求之一。...点击 “上一张” 和 “下一张” 按钮时,通过事件切换实现了图片切换效果。这展示了事件切换在实际项目中强大应用。 小结 通过本文学习,我们深入了解了 JQuery事件切换

    16720

    【融职培训】Web前端学习 第4章 jQuery 2 jQuery常用方法

    一、事件概述 事件基本概念 上一章我们讲解了使用jQuery选择器获取元素,并通过一些方法来操作元素,本章我们讲解事件概念,通过事件我们可以加强用户与浏览器交互性,例如可以实现当用户点击某个元素时候...结合我们上一章内容,来实现一个功能,当我们点击按钮时候,将一张图片切换成另一张图片,代码如下所示。...,也就是img标签,当我们点击img标签时候,使用attr方法将其src属性设置成另一张了图片地址,这样就实现了图片切换。...切换图片 找到了列表索引,我们下一步就要实现图片切换功能了,首先我们需要了解数组概念,数组是一个集合,我们将3章图片路径放到了数组中,这样我们就可以通过数组下标来获取到数组元素了。...mouseenter和mouseleave事件,这样写效果与上面完全相同

    1.6K10

    Web前端学习 第4章 jQuery 2 jQuery常用方法

    一、事件概述 事件基本概念 上一章我们讲解了使用jQuery选择器获取元素,并通过一些方法来操作元素,本章我们讲解事件概念,通过事件我们可以加强用户与浏览器交互性,例如可以实现当用户点击某个元素时候...结合我们上一章内容,来实现一个功能,当我们点击按钮时候,将一张图片切换成另一张图片,代码如下所示。...,也就是img标签,当我们点击img标签时候,使用attr方法将其src属性设置成另一张了图片地址,这样就实现了图片切换。...切换图片 找到了列表索引,我们下一步就要实现图片切换功能了,首先我们需要了解数组概念,数组是一个集合,我们将3章图片路径放到了数组中,这样我们就可以通过数组下标来获取到数组元素了。...mouseenter和mouseleave事件,这样写效果与上面完全相同

    1.9K30

    jQuery Mobile 中使用 UI 组件

    对列表提供更多功能一个选项称为拆分按钮列表。拆分按钮列表使您能够在同一个列表项中提供两个可单击选项。...创建一个拆分按钮列表很简单:在使用 listview data-role 一个列表项中添加两个彼此相邻定位点标记(清单 7)。 清单 7....使用 jQuery Mobile 进行文本输入,基本上也与原生文本输入相同;然而,您可以使用 HTML5 输入类型,如 email、tel 和 number。...创建一个切换开关与创建一个滑块类似,但其中还是有一些较大差异。输入变成一个 select 元素,并且要添加两个选项。清单 15 提供了切换开关示例,该开关提供 on/off 功能。...该属性值将一个自定义 jQuery Mobile 选择列表转换为一个切换开关。 结束语 jQuery Mobile 框架提供一个为移动网站创建可用 UI 组件快速解决方案。

    8.1K20

    插上翅膀:JQuery 插件机制详解

    这样,我们就在页面中成功地使用了一个简单 JQuery 插件。JQuery 插件原理了解了如何编写一个简单 JQuery 插件后,让我们深入揭开插件神秘面纱,了解它是如何工作。...基于选择器扩展基于选择器扩展是通过 $.fn 对象方式,为所有 JQuery 选择器返回对象添加新方法。这种扩展方式通常用于操作一组元素,例如在所有匹配元素上执行相同操作。....slider-container,其中包含一个图片容器 .slider 和左右切换按钮 .prev 和 .next。...);在这个插件代码中,我们首先获取了容器、图片轮播、左右按钮元素,然后初始化了一些参数,包括图片数量、设置图片容器宽度等。...为插件添加选项在前面的例子中,我们已经展示了如何使用配置对象来自定义插件行为。现在,我们来扩展插件,允许用户通过选项来设置轮播速度。

    28110

    前端开发JS——jQuery常用方法

    ,还是会实现所绑定事件;任何鼠标按钮都会实现所绑定事件;用event 对象which区别按键,敲击鼠标左键which值是1,敲击鼠标中键which值是2,敲击鼠标右键which值是3 3、jQuery...通过off()方法移除绑定(off和unbind也是一样, 推荐使用off) 绑定两个事件 $ele.on("mouseover mouseout", function(){}) 解除其中一个事件...important重写样式 2、jQuery中显示与隐藏切换toggle方法(改变样式display:none/block) toggle方法是上述两个方法切换 $ele.toggle()...因为动画是异步,所以要在动画之后执行某些操作就必须要写到回调函数里面 4、jQuery中上卷下拉切换slideToggle方法(改变元素高度) slideToggle 方法是上述两个方法切换 $ele.slideToggle...因为动画是异步,所以要在动画之后执行某些操作就必须要写到回调函数里面 6、jQuery中淡出淡入切换fadeToggle方法(改变元素透明度) fadeToggle 方法是上述两个方法切换 $ele.fadeToggle

    4.9K20

    Jump Start Bootstrap 第4章

    我们将会看到如何添加下拉菜单到导航栏、切换按钮状态、当点击按钮时漂亮警告信息会在显示一段时间后消失等等功能。...要通过JQuery触发下拉插件,你需要使用方法dropdown(); $().dropdown('toggle'); 在页面加载后,我们可以使用这个方法把下拉插件从关闭状态切换到开启状态。...让我展示一个如何使用这些事件例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发时状态。 <!...按钮 在前面的章节中,我们看到了如何创建各种类型按钮。这里,我们将看到使用BootstrapJavaScript插件如何在不同状态使用它们,并且让它们切换状态。...Bootstrap按钮两个状态;active和inactive,active状态有一个类”active”,但inactive状态没有关联类;相反,你可以用下面的代码创建一个简单按钮切换状态。

    28.3K40

    前端开发者都应知道 jQuery 小技巧

    回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏图片 Hover 上 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单折叠效果 将两个 Div 设为相同高度...在新窗口打开外部链接 找到文本元素 切换可视与隐藏触发器 Ajax 调用错误处理 链式操作 回到顶部按钮 通过使用 jQuery animate 和 scrollTop 方法...Hover 上 Class 切换 如果用户鼠标悬停在页面上某个可点击元素时,你想要改变这个元素视觉表现。...淡入淡出与滑动是我们经常使用 jQuery 做成动画效果。...通过文本找到元素 通过使用 jQuery contains() 选择器,你可以找到某个元素文本。

    2.3K30

    jQuery

    jQuery 对象是经过包装dom对象(伪数组形式存储) jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象和Dom对象转换 // DOM对象转换成jQuery对象...$s(“Ii.current”) 交集元素 2.1.2 层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号,获取亲儿子层级元素;注意,并不会获取孙子层级元素 后代选择器...$(“ul li”); 使用空格,代表后代选择器,获取ul下所有li元素,包括孙子等 2.1.3 筛选选择器 名称 用法 描述 :first $(‘li:first’) 获取第一个li元素 :last...div加定位,否则无效 3.2.5 事件切换 jQuery中有hover()事件,功能类似于css中hover hover(function,function) 传入2个参数,第一个参数是鼠标移入是触发函数...页面刷新缓存清除 data('myName','ljc');//向元素添加数据 data('myName');//向元素读取数据 4.1.4 全选按钮 通过:checked选择器,可以以数组形式返回被选中元素

    8.4K10

    jQuery Cheat—Sheet(jQuery学习笔记)

    jQuery 2.0 不再支持IE 6/7/8 了,但是 jQuery 1.9 会继续支持 jQuery可以下载使用,有两个版本 jQuery 可供下载 jquery-X.X.X.min.js...下面是两个具体例子: 试图隐藏一个不存在元素 获得未完全加载图像大小 提示:简洁写法(与以上写法效果相同): $(function(){ // 开始写 jQuery 代码... })...() 通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。...3em }); $(“#stop”).click(function(){ //参数暂停,一次点击,暂停一个animate动画,点击两次暂停两个动画 $(“div”).stop...**Chaining 允许我们在一条语句中运行多个 jQuery 方法**(在相同元素上) ### jQuery 方法链接 有一种名为链接(chaining)技术,允许我们在相同元素上运行多条 jQuery

    16.2K30

    收集35个 jQuery 小技巧代码片段,可以帮你快速开发.

    列高度相同 如果使用两个CSS列,使用此种方式可以是两列高度相同。....鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class...16.禁用 input 字段 有时你可能需要禁用表单 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。...fade/slide fade 和 slide 是我们在 jQuery 中经常使用动画效果,它们可以使元素显示效果更好。...DIV 高度相同 有时你需要让两个 div 高度相同,而不管它们里面的内容多少。

    5.4K20

    与Ajax同样重要jQuery(2)

    表单选中元素 配合基本过滤选择器,缩小选中范围 4.jQueryDOM操作 使用jQuery九种选择器可以基本选中需要操作对象,但是为了提高jQuery查询效率,可以结合jQuery内置查找函数一起使用...]) 获取下一个兄弟元素 prev([expr]) 获取前一个兄弟元素 siblings([expr]) 获取所有兄弟元素 在XML 解析中 find 方法使用最多 对查找结果进行遍历操作 each(function...{ alert($(this).text()); }); // 使用remove方法删除 p元素,连同事件一起删除 // var $p = $("p").remove(); // 使用detach删除,...练习1: ² 为页面内所有p 元素绑定 一次性事件,点击打印p元素中内容 ² 页面内有两个按钮,点击按钮1, 触发按钮2 click事件执行 <script type="text/javascript...p<em>元素</em>中内容 $("p").one("click",function(){ alert($(this).text()); }); //页面内有两个按钮,点击按钮1, 触发按钮2 click事件执行 $

    6.2K50

    一些好用jquery技巧

    1、返回顶部按钮 通过使用jQueryanimate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部简单动画: // Back to top $('.top').click(function...5、悬停切换类 假设你希望当用户将鼠标悬停在可点击元素上时,它会改变颜色。...这就要在阻止默认动作上做文章了: $('a.no-link').click(function (e) { e.preventDefault(); }); 8、淡入/滑动切换 滑动和淡入都是我们用jQuery...10、让两个div高度相同 有时候,你需要让两个div无论包含什么内容都拥有相同高度: $('.div').css('min-height', $('.main-div').height()); 设置...修复时候要小心这个问题。 12、通过文本查找元素 通过使用jQuerycontains() 选择器,你可以找到元素内容文本。

    3.9K60

    jquery特殊效果 - fadeInfadeOuthideshowslide

    ; }); }); fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素可见状态 slideDown...那么下一步写click监听点击按钮,然后触发div使用fadeOut()方法,使得已存在div消失,如下: ? 下面再写另一个按钮,用来触发fadeIn()方法,如下: ? ?...但是如果要写两个方法来切换的确挺麻烦,那么fadeToggle()这个方法就要隆重登场了。只需要写这个方法就可以完成切换,如下: ? ?...hide() 隐藏元素 / show() 显示元素 / toggle() 切换元素可见状态 上面写了淡入淡出效果,下面来写一下隐藏和显示元素效果。...toggle() 切换元素可见状态 ? ? ? 好了,上面这个就是显示和隐藏切换效果。 show() 显示元素 ? ? ? hide() 隐藏元素 <!

    2.5K20

    程序员都会 35 个 jQuery 小技巧

    列高度相同 如果使用两个CSS列,使用此种方式可以是两列高度相同。...15.鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该...16.禁用 input 字段 有时你可能需要禁用表单 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。...fade/slide fade 和 slide 是我们在 jQuery 中经常使用动画效果,它们可以使元素显示效果更好。...DIV 高度相同 有时你需要让两个 div 高度相同,而不管它们里面的内容多少。

    2.6K00

    jQuery一些事件以及动画

    事件组合一起使用 hover():鼠标悬停合成事件 hover:由两个函数组成,鼠标进来和鼠标出去两个动作。...,如果点击了p标签就会触发到两个事件,一个是p自己点击事件,一个是div点击事件。...鼠标位置 移除事件 元素.unbind(“事件名”); 移出事件,直接对元素使用unbind  或 off 来移出指定事件 例如在某些情况下,按钮只能点击一次,点击一次后再点击就无效 案例:按钮只能点击一次...点击按钮,如果div是显示就逐渐透明,如果是透明就逐渐显示 自定义动画 通过设置使用animate来设置元素属性值,来实现效果 缩放,元素.animate({属性:属性值},time...,div移动到top 10,left 10位置  移动(本元素),距离 通过用top=”+=”  top=”-=” 来直接对元素本身属性赋值,我们用一个按钮来演示效果 <input type

    2.1K20
    领券