`
yuelangyc
  • 浏览: 448971 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js特效-同时控制多个div层显示隐藏

阅读更多
id是一个元素的唯一标识,按照编程规范,
应当保证id在当前DOM中是唯一的,不可以存在多个相同id的元素。

虽然有多个相同的id并不会导致js报错,
但是当用document.getElementById()等等方法通过id去获得元素时,
只能获得第一个出现的该id元素。

id和name不同,name可以重复,
所以document.getElementsByName()获得的是一个数组,
document.getElementById()获得的是一个元素。

仔细看,函数名当中的element一个是复数一个是单数。
可以把那些div的name设置成一样,
然后document.getElementsByName()得到你的div数组,
遍历这个数组,把每个div的style.display设为空

var div_array = document.getElementsByName("你的div的name"); 
for(i=0;i<div_array.length;i++)
{
//或者赋值为"block"、"inline",看你想怎么显示了必须有引号
div_array[i].style.display = ""; 
}
分享到:
评论
2 楼 zhangyf111 2014-04-21  
1 楼 whzjjj410 2013-03-06  
[/color[color=brown]]风光好

相关推荐

    漂亮的网站源码30个【华丽的JS特效+DIV控制布局】

    漂亮的网站整站源码30个【DIV控制布局+华丽的JS特效】 30个漂亮的网站源码 所有网站都采用CSS控制样式展现,没有table,都是DIV控制布局!更有一些网站有华丽丽的JS特效。 36个网站中包含了各行各业的网页设计,譬如...

    JavaScript特效大全.rar

    JavaScript特效大全:控制Div属性 网页换肤 函数接收参数并弹出 用循环将三个Div变成红色 鼠标移入/移出改变样式 记住密码提示框 百度输入法 点击Div,显示其innerHTML 求出数组中所有数字的和 弹出层效果 函数传参,...

    100多个JQuery效果示例(实例)div+css+javascrpit

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    JavaScript网页特效范例宝典源码

    实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例007 为弹出的窗口加入关闭按钮 11 实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时,不弹出询问对话框 13 1.2 弹出网页对话框 ...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...

    CSS3正方体的3D旋转动画特效.zip

    &lt;div id="main-wrapper"&gt;  &lt;div id="maincube" class="cube" &lt;div class="front"&gt;&lt;/div&gt;  &lt;div class="back"&gt;&lt;/div&gt; ... 这是一款纯CSS3绘制的3D立体正方形旋转动画效果,多个CSS3正方体同时旋转动画特效。

    5个可爱的CSS3 Loading加载动画

    之前我们分享过很多漂亮的CSS3 Loading加载动画,印象最深的要算这款CSS3 Loading进度条加载动画特效 3款绚丽风格。这次要给大家介绍的是另外一款可爱的CSS3 Loading动画,一共有5种动画类型,每组Loading动画都非常...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...

    zepto手机移动端拼音字母城市选择代码.zip

    这是一款手机端触屏滑动按拼音字母查询的多个城市选择器网页特效,zepto手机移动端拼音字母城市选择代码。 &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt; &lt;meta name=...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jQuery弹出层插件PopupDiv-v1.0下载(支持ajax、居中等效果) 4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一...

    鼠标经过图标导航高亮旋转动画js代码.zip

    鼠标经过图标导航高亮旋转动画js代码是一款鼠标经过多个图标导航时,当前图标导航高亮,其余的变成暗显示,里面的标签旋转隐藏动画效果。 &lt;div class="mian"&gt; &lt;div class="adframe"&gt; &lt;div class="adleft"&gt; ...

    jQuery特效之浮动div模式框

    虽然LeanModal具有较多的优势,但在实际开发过程中往往不灵活,因而对原LeanModal插件进行了改造,以其达到灵活控制,同时便于二次开发,改造主要涉及:(1)由原来的实例方法$.fn.extend改为静态方法$.extend,便于...

    程序天下:JavaScript实例自学手册

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    js实现div的切换特效上一个下一个

    实现div切换的方法有很多,下面为大家介绍下使用js是如何实现的

    《程序天下:JavaScript实例自学手册》光盘源码

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    CSS3图片3D旋转轮播特效.zip

    &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;...meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;... js css3实现的多个图片3D旋转轮播特效,很好看的网站焦点图立体旋转切换代码。

    js仿小米官网图片轮播特效

    通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示、隐藏。 截图如下(红框内的...

    精通CSS+DIV网页样式与布局视频教材

    5.2.5 添加多个背景图片 5.2.6 背景样式综合设置 5.3 背景综合一:我的个人主页 5.4 背景综合二:古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.1.1 表格中的标记 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700多个小图标。 -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...

Global site tag (gtag.js) - Google Analytics