开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js控制多个div显示隐藏

在JavaScript中控制多个div元素的显示与隐藏，通常涉及到对DOM（Document Object Model）的操作。以下是基础概念、优势、类型、应用场景以及解决方案的详细说明：

基础概念

DOM操作：JavaScript可以通过DOM API来访问和修改HTML文档的内容、结构和样式。
显示与隐藏：通过修改元素的style.display属性，可以实现元素的显示与隐藏。

优势

动态交互：可以根据用户操作动态地显示或隐藏内容，提升用户体验。
内容管理：有效地管理页面上的信息展示，避免页面过于拥挤。

类型

基于ID的控制：通过元素的ID来选择并控制单个或多个元素。
基于类的控制：通过给多个元素添加相同的类名，然后选择这个类来统一控制。
基于标签的控制：选择特定的HTML标签进行控制。

应用场景

导航菜单：点击菜单项显示对应的子菜单，隐藏其他子菜单。
选项卡切换：在不同的内容区域之间切换显示。
模态窗口：点击按钮显示模态窗口，点击关闭或外部区域隐藏窗口。

解决方案

以下是一个简单的示例，展示如何使用JavaScript控制多个div的显示与隐藏：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制多个div显示隐藏示例</title>
<style>
  .hidden { display: none; }
</style>
</head>
<body>

<button onclick="toggleDivs('div1')">显示/隐藏 Div 1</button>
<button onclick="toggleDivs('div2')">显示/隐藏 Div 2</button>

<div id="div1" class="hidden">这是Div 1的内容。</div>
<div id="div2" class="hidden">这是Div 2的内容。</div>

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

JavaScript (script.js)

function toggleDivs(divId) {
  var div = document.getElementById(divId);
  if (div.classList.contains('hidden')) {
    div.classList.remove('hidden');
  } else {
    div.classList.add('hidden');
  }
}

解释

HTML部分：定义了两个按钮和两个div元素，每个div初始状态都是隐藏的（通过CSS类.hidden）。
JavaScript部分：toggleDivs函数接受一个参数divId，用于指定要显示或隐藏的div的ID。函数通过检查div是否包含.hidden类来决定是显示还是隐藏该div。

扩展

如果需要同时控制多个div，可以修改函数来接受一个数组或类名，并遍历这些元素进行操作。例如：

function toggleMultipleDivs(className) {
  var divs = document.getElementsByClassName(className);
  for (var i = 0; i < divs.length; i++) {
    if (divs[i].classList.contains('hidden')) {
      divs[i].classList.remove('hidden');
    } else {
      divs[i].classList.add('hidden');
    }
  }
}

这样，通过点击按钮调用toggleMultipleDivs('myClass')就可以同时控制所有具有myClass类的div元素的显示与隐藏。

注意事项

确保JavaScript代码在DOM元素加载完成后执行，可以在window.onload事件中执行相关代码，或者将<script>标签放在</body>之前。
使用classList可以更方便地管理元素的类，避免直接操作style属性。

通过上述方法，你可以灵活地控制页面上多个div元素的显示与隐藏，实现丰富的用户交互效果。

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

有帮助

没帮助

相关·内容

今日作业 -- 用js控制DIV的显示隐藏

这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。...参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，，暴露出来的问题主要有二个，一是DOM查找的效率问题，这个大家自己其实都懂，我就提一下不多说了哈，，二是判断条件的选择

17.1K6 0

jq 控制显示隐藏div

之前一直使用attr("style","display:none;")来隐藏div $("#id").attr("style","display:none;");//隐藏div $("#id").attr...("style","display:block;");//显示div 有时会导致class失效后来发现通过show、hide方法控制显示隐藏div不容易出问题例如 $("#id").hide();/.../隐藏div $("#id").show();//显示div

12.4K3 0

JS 控制隐藏显示

比较简单的实现.style.display就是控制层隐藏或显示的属性....> div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById(...";//显示通过设置display属性可以使div隐藏后释放占用的页面空间，如下 style="display: none;" document.getElementById("typediv1")....style.display="none";//隐藏 document.getElementById("typediv1").style.display="";//显示如果用div.style.display...="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了

20.7K3 0

DIV的显示与隐藏

文章目录一.不占位二.占位 *********************div的显示和隐藏************************************ 一.不占位 1.隐藏 div对象.style.display...= “none”; 2.显示 div对象.style.display = “block”; 点击的时候,第一次不能正常显示，需要点第二次…为什么?...原因是: 内嵌样式设置了div 的 display: none 在js代码中无法获得内嵌样式display 期望得到none 实质得到"" 所以会出现问题二.占位隐藏 div对象.style.visibility...= “hidden”; 2.显示 div对象.style.visibility = “visible”; div class="axb"> 隐藏的 --> div>

5.2K2 0

原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解。...none"; // 隐藏盒子的方法 document.getElementById("d").style.display = ""; // 显示盒子的方法方式二 visibility属性可以控制...div的显示和隐藏，但是隐藏后页面显示空白，功能也消失。...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle

1020 0

jquery 默认隐藏div,点击按钮显示，再次点击隐藏

html 代码： div id="exPara" style="display:none"> 22222222 div> jquery 代码

8.9K3 0

通过select下拉框里的value控制div显示与隐藏

charset="UTF-8"> js..."> $(function() { //隐藏div...$("#shouhou2").hide(); $("#shouhou3").hide(); //给div添加change事件 $(...id="shouhou1" style>表格区域div> div id="shouhou2" style>折线图区域div> div id="shouhou3..." style>柱状图区域div> 原文作者：祈澈姑娘原文链接：https://www.jianshu.com/u/05f416aefbe1 创作不易

2.9K8 0

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？...要设置CSS滚动条样式，需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。...同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，接下来为大家介绍。...常规overflow怎么设置 overflow-y:scroll 总是显示纵向滚动条 overflow-y:visible 不剪切内容也不添加纵向滚动条 overflow-x:scroll 总是显示横向滚动条...在需要时剪切内容并添加滚动条，DIV默认情况也是这个值，但需要设置时候设置即可； hidden：不显示超过对象尺寸的内容； scroll：总是显示滚动条。

8.9K6 0

JQuery 操作CSS使DIV显示或者隐藏

在某些需求中，你需要点击按钮显示某个div，并隐藏已经显示的按钮。同时点击另外一个按钮，又会隐藏已经显示的，并显示已经影藏的。

4.1K1 0

点击按钮平移隐藏与显示div（使用translate）

[endif]--> div class="content"> div class="leftDiv" id="leftDiv">...div> js"> div class="content"> div class="leftDiv" id="leftDiv">..." class="changeBtn">切换 div> div class="right-content"> ...> div> js"> <script

4.1K2 0

小程序js控制图片属性隐藏

部分代码： wxml js data: {...back: "/img/back.gif", }, 判断返回结果，如果有返回字段数据，清空初始化的图片，显示数据。

6.6K3 0

vue项目中div切换显示与隐藏状态时的动画效果

// 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行 // el:指的是当前调用这个方法的元素对象 // done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before...el.offsetHeight; el.style = "padding-left: 0px"; //done(); }, //用不到可以不写 afterEnter: function (el) {}, //显示到隐藏

3.8K1 0

vue中控制element表格列的显示与隐藏

根据‘执行进度计算方式’的单选框里面的选项不同，展示不同的column 按最小制剂单位统计: 按含量统计: 实现方式就是拿到选项框里面的值，再根据里面的值来判断哪些column显示和隐藏...；关于显示和隐藏可以设置变量； <el-table-column label="任务量（片/粒/支）" min-width="160" prop...default { data() { return { showColumn,//定义一个变量 } }, methods: { //根据执行进度计算方式条件不同显示

8591 0

显示隐藏切换同时变化文字jquery与js实现

;}); $(".fixed-table-container").css("padding-bottom","40px"); }) }) 第二种方法js...oDiv1.style.display = 'none'; oDiv2.style.display = 'block'; //这个地方显示... oDiv2.style.display = 'none'; oDiv1.style.display = 'block'; //这个地方显示

7.6K3 0

HTML5-JS操作页面滚动条（禁止、隐藏、显示、不显示）

不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY

10.9K3 0

之监控并控制SystemUi（状态栏）的显示与隐藏

View.INVISIBLE：隐藏状态栏，同时Activity会伸展全屏显示。View.SYSTEMUIFLAGFULLSCREEN：Activity全屏显示，且状态栏被隐藏覆盖掉。...View.SYSTEMUIFLAGLOWPROFILE：状态栏显示处于低能显示状态(low profile模式)，状态栏上一些图标显示会被隐藏。...---- 三、setSystemUiVisibility(int visibility)控制状态栏的显示与隐藏 View类提供了setSystemUiVisibility和getSystemUiVisibility...方法，这两个方法实现对状态栏的动态显示或隐藏的操作，以及获取状态栏当前可见性。...(low profile模式)，状态栏上一些图标显示会被隐藏。

5.8K3 0

vue 控制某个元素的显示与隐藏之v-if属性

HTML代码： div title="意向价格" v-if="showPrise">div> div title="意向租金" v-if="showRentPrise">div...> JS代码： new Vue({ el: '#app', data: { showPrise:false, showRentPrise...= true; } } } }) 解释：默认showPrise和showRentPrise的状态是false，所以是隐藏的...当你在changeStatus通过了某种条件，你就可以控制showPrise和showRentPrise的状态了。true为显示，false为隐藏。...="height: 100%"> div class="eagleMap" @click="toolEventSlot" v-if="showEagleMap">div>

7.6K3 0

小程序实践（四）：动态控制组件的显示隐藏

组件有个属性：hidden='' ,值为true/false ，当false的时候说明不隐藏，当true的时候说明隐藏，注意该隐藏是不保留组件位置的。...实现即 .js 配合.wxml 文件一、在.js 文件下的 Page({}) 里面的data:{} 里面创建一个布尔类型的属性 ? 二、在.wxml文件下构建一个view组件 ?...-------------------------------------------------------------------------------------- 验证： 1、false，不隐藏的时候...2、true，隐藏的时候 ?

1.9K2 0

【c#】控制台程序的显示和隐藏「建议收藏」

在项目开发的过程中，为了方便调试，利用控制台打印出一些提示信息，当安装到现场的时候，我们担心工作人员手误关掉了程序，所以将控制台隐藏，让程序在后台跑。...下面是具体的显示和隐藏的代码： /// /// 控制台帮助类 /// public...FindWindow(string lpClassName, string lpWindowName); /// /// 设置窗体的显示与隐藏...{ ShowWindow(hWnd, 1); } } } 分析代码我们可以看出，控制显示和隐藏的关键代码是...ShowWindow(hWnd, 0); 参数为0：隐藏；为1：显示；为2：最小化。

4.3K4 0

js 控制div 元素随着窗口的变化，保持长宽比例不变

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

3.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭