开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现两个div切换

在JavaScript中实现两个div元素的切换，通常涉及到DOM操作和事件监听。以下是一个基础的实现方式：

基础概念

DOM操作：Document Object Model，文档对象模型，是HTML和XML文档的编程接口。
事件监听：为元素添加事件处理器，以便在特定事件发生时执行代码。

实现步骤

HTML结构：创建两个div元素，并为它们设置唯一的标识符。
CSS样式：定义显示和隐藏的样式。
JavaScript逻辑：编写脚本来切换div的可见性。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Toggle Example</title>
<style>
  .hidden {
    display: none;
  }
</style>
</head>
<body>

<div id="div1" class="content">Content for Div 1</div>
<div id="div2" class="content hidden">Content for Div 2</div>
<button id="toggleButton">Toggle Divs</button>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
  const div1 = document.getElementById('div1');
  const div2 = document.getElementById('div2');
  const toggleButton = document.getElementById('toggleButton');

  toggleButton.addEventListener('click', function() {
    if (div1.classList.contains('hidden')) {
      div1.classList.remove('hidden');
      div2.classList.add('hidden');
    } else {
      div1.classList.add('hidden');
      div2.classList.remove('hidden');
    }
  });
});

优势

简单直观：代码易于理解和维护。
灵活性：可以轻松扩展以支持更多div或其他交互逻辑。
性能良好：直接操作DOM，避免了不必要的重绘和回流。

应用场景

选项卡切换：在用户界面中切换不同的内容面板。
步骤指示器：在多步骤表单或向导中切换步骤。
动态内容加载：根据用户操作显示或隐藏特定内容。

可能遇到的问题及解决方法

事件未触发：确保事件监听器正确绑定到元素上，且元素在DOM加载完成后存在。
样式未更新：检查CSS类是否正确应用，以及是否有其他样式覆盖了预期效果。
性能问题：避免频繁操作DOM，可以使用防抖或节流技术优化事件处理函数。

通过上述方法，你可以实现两个div元素的简单切换功能，并根据需要进行扩展和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

带左右箭头切换div的js 原

(adsbygoogle = window.adsbygoogle || []).push({});

12.5K3 0

js判断鼠标同时离开两个div

:0;left:100px; display:none} js.../tcomment/jquery-1.6.2.min.js"> jQuery(function(){ window.a...class="grid">div> div class="grid">div> div class="grid">div>...div class="grid">div> div class="grid">div> div class="grid...">div> div class="grid">div> div class="grid">div> div

4.7K7 0

点击导航栏，切换div内容（js+css+html）

12.7K2 0

两个DIV实现雷达扫描效果

题目：有两个DIV，如下： div class="radar"> div class="fan">div> div> 其中，radar类DIV是200px的宽高，fan类DIV是100px...DIV，如果你只是用这两个DIV本身添加样式，能达到效果？...: 100px; background: blue; display: block; content: '::after' } 如果你运行上面的代码，你将得到上红下蓝的两个DIV，而且下面的这个...题目的实现代码好了，该说完的说完了，我们来实现下题目说的效果吧。...DIV实现雷达扫描效果；相关源码存放仓库。

7572 0

css实现左右两个div等高

提出问题：现在有两个div，但是两个div里面内容多少不确定，可能左边多，可能右边多，css要如何设置可以保证左右两边的div等高呢？...解决方案：每个div使用display:table-cell div的父元素使用display:box 示例代码1： div class="div1"> div1 ...div> div class="div2"> div2 div> 示例代码2： div> div class="div2"> div2 div> div> <

1.4K4 0

JS实现鼠标拖动div移动

.style.left; objY = div1.style.top; mouseX = e.clientX; mouseY...= document.getElementById("div1"); var x = e.clientX; var y = e.clientY;...(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) +..."px"; document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y...= document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX

34.4K2 0

js实现全屏切换控制 WordPress

前段时间做的几个小项目都加入进去了全屏切换控制按钮，这个过程是怎么实现的呢，其实和暗黑控制切换一样。非常的简单。并且适用于所有网站，WordPress、typecho都不是问题，技术互通。...只待你补充css效果展示图片正文开始#js代码//控制全屏function enterfullscreen() { //进入全屏 $("#fullscreen").html("退出全屏");...#js调用示例 div class="fk_service_zmkiqp_cont"> 切换全屏div>代码源于:博客园:挑战者V博客 https://www.cnblogs.com/youcong/p/11440596.html

4.4K1 0

js实现字符大小写切换

return `${s1.toUpperCase()}${s2.toLowerCase()}` }) } caseConvert('AsA33322A2aa') //aSa33322a2AA 总结相信实现方法肯定还有很多

4.5K1 0

js如何实现随机数切换

前言在一些电商网站,或一些活动页上,看到一些特效,比如:抽奖时,点击图片,实现图片的随机切换,数字的随机切换等,为了吸引用户的注意力,增加网页的互动性,这个效果是怎么实现的呢 01 具体示例 https...://coder.itclan.cn/fontend/js/14-click-num-suiji/ 02 随机切换图片代码 <!...onOff; } 随机切换图片,其实就是在切换图片img的src,当然也可以把图片放到一个数组当中存储的,上面我是把一些图片放到一个...images文件夹里面通过相对路径的方式去实现的,上面定时器内的代码也可以使用for循环去实现的实现这个效果,需要借助一个定时器,点击图片显示和暂停时,需要借助一个开关按钮即可实现 03 实现随机数的切换...具体代码如下所示,当使用原生js方法能实现后,在用vue或等其他一些框架,在里面实现相同的效果，核心代码实现依旧是没有变的 div id="wrap">

8.1K7 0

CSS+JS实现tab标签切换

实现tab标签切换比较简单，下面先看看我实现的效果： ?...我主要实现了： 1、tab之间的相互切换； 2、显示选中的tab 下面看看实现代码： css： html,body,div{ font-size: 12px; font-family:"...top: 27px; left: 1px; } .tab-content{ padding: 10px; border: solid 1px #c5dbec; } js.../jquery-1.8.3.js"> js"> div class="tab-ui"...div> div> div> 实现思路：循环将所有的内容标签隐藏，并将tab标题栏的active样式清除，完了之后设置选中标签的内容显示，并给

11.5K3 0

js简单实现div宽度匀速增加减小

点击音乐右边的div可以变长或者变短。代码： 1 div> 60 div class="right"> 61 div class="mask" id="mask"> 62 div class="content">我是内容div> 63 div> 64 div class="clear">div><!

8.4K7 0

JS实现div块的拖放，调换位置

主要是HTML5 的拖放（Drag 和 Drop）例子（不需要对div设置ID）： div> div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)...div> div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)..." draggable="true" οndragstart="drag(event, this)"> div3 div> 上面函数介绍： ondrop...: 当放置被拖数据时，会发生 drop 事件，这里自定义drop(event,this)函数,互换两个的innerHTML ondragover:当拖动链接等有默认事件的元素时，要在ondragover

6.7K2 0

DIV+JS+CSS实现点击弹出图片效果

的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js代码 ...class="top_contact_us"> div class="top_telphone">div> div class="top_weixin">微信公众号div> div class="top_qq">官方QQ群div> div> div id="light_qq" class="white_content..."> div> div id="light_weixin" class="white_content">

26.2K3 0

用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。...background-color: #999; } 打开弹出图层 div...="请输入内容"> 提交 div class="close" id="close-popup">×div> div> div> 实现的，当用户单击关闭按钮时，它将隐藏弹出框并将背景页面状态还原。...如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

7.4K5 0

两个div在同一行，两个div不换行「建议收藏」

方法一： div style=”display:inline”> div id=”div1″ style=”float:left”>div1 contentdiv> div...id=”div2″ style=”float:left”>div2 contentdiv> div> 上面的div1和div2就会在同一行显示。...（此方法一般都会有效的）方法二： div id=”div1″ style=”float:left”>div1 contentdiv> div id=”div2″ style=”clear...:both”>div2 contentdiv> 这样的方法有时候会不起作用，好像在引入别的js框架中使用部分会出现故障。

1.9K1 0

js动态添加div

准备好, 添加到内容div中的第一个点击每行的添加将div添加到当前点击行后面一个点击每行删除删除当前div 实现基本思路很简单, 只要在每个点击按钮上添加对应的点击事件, 将结果封装成类....我在封装的时候喜欢先想用的时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下因为添加的div肯定是不同的, 是需要传的参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML,...然后传id即可添加成功后需要有个回调函数, 我得做些收尾的工作最好有这两个参数就可以直接运行开始码代码了: 在创建的时候接收参数, 大部分参数都有默认值, 也就是说, 按照默认值来看, 一个参数都不需要...当前实现还很简陋, 代码放在码云上, 发现问题再更新, 下载后可以直接运行demo文件 https://gitee.com/hujingnb/addDivItem 下面是当前的简单实现, 要看最新代码请移步码云...'] || 'content_div_id'; var exampleDivId = params['example_div_id'] || 'example_div_id'; var

24.5K4 0

js如何实现随机数的切换

2646871284253147138&format_id=10002&support_redirect=0&mmversion=false 前言在一些电商网站,或一些活动页上,看到一些特效,比如:抽奖时,点击图片,实现图片的随机切换...,数字的随机切换等,为了吸引用户的注意力,增加网页的互动性,这个效果是怎么实现的呢具体示例随机数 01 随机切换图片代码 <!...images文件夹里面通过相对路径的方式去实现的,上面定时器内的代码也可以使用for循环去实现的实现这个效果,需要借助一个定时器,点击图片显示和暂停时,需要借助一个开关按钮即可实现 02 实现随机数切换...具体代码如下所示,当使用原生js方法能实现后,在用vue或等其他一些框架,在里面实现相同的效果，核心代码实现依旧是没有变的 div id="wrap">...原理是随机数和最大值减最小值的差相乘,最后再加上最小值其中Math.floor()浮点数向下取整 Math.floor(Math.random() * (max - min)) + min 其他的,都是与原生js

7.7K4 0

原生JS实现切换不同图片的特效

分享一个由原生JS实现的图片切换特效，效果如下：原理比较简单，实现的代码如下：原生JS实现切换不同图片的特效 * { margin: 0; padding: 0; } #div1...50%; margin-left: -100px; top: 0; } div...id='div1'>div> for (var i = 0; i < 10; i++) {

17.8K1 0

原生js拖拽指定div

DOCTYPE html> 原生js拖拽效果 div id="box">div> <script type="text/javascript

9.9K2 0

JS-随机div颜色

7 8 div...javascript"> 14 window.onload = function(){ 15 var oDiv1 = document.getElementById("div1..."); 16 var oDiv2 = document.getElementById("div2"); 17 var a = Math.floor(Math.random...getRandomColor(); 38 } 39 40 41 42 43 div...id="div1">div> 44 div id="div2">div> 45 46 47 以上，是第一种

18.2K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭