 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
JS控制DIV的隐藏和显示
下载积分：200
内容提示：JS控制DIV的隐藏和显示
文档格式：DOC|
浏览次数：2|
上传日期： 09:58:48|
文档星级：
该用户还上传了这些文档
JS控制DIV的隐藏和显示
官方公共微信js 一个按钮 怎么控制多个DIV来回 显示和隐藏_百度知道
js 一个按钮 怎么控制多个DIV来回 显示和隐藏
js 一个按钮 怎么控制多个DIV来回 显示和隐藏
提问者采纳
);&nbspjs 中 处理 div 的style 的 display为 block/none即可代码示例;div2&div1.display=&none&quot:var&//隐藏div2.;;div2=div1);//显示;&var&nbsp.getElementById(&quot.style.style.getElementById(&&nbsp.;;&block&quot.display=&div1&quot
可是 怎么用按钮控制呢
如果我有3个DIV
当前是显示第一个DIV
当我按下按钮时 显示第二个DIV 其他的DIV隐藏 再按下按钮 显示第三个DIV 其他的隐藏 又按下按钮
显示第一个DIV 其他的隐藏 就是这样 循环隐藏和显示 改这样实现啊
假定 3个div 的 id 为 d1, d2, d3你要的效果就是 按下按钮, d1/d2/d3 轮流显示, 不显示的隐藏, 按钮的 onclick 事件触发调用 toggleDiv 方法:基本思路:需记录当前那个是可见的, 默认开始时, 1可见, 2/3不可见;给定一个计数器, 以3为模, 到3 就自动置0表示为1号div处理显示/隐藏.&div&id='d1'&style='display:width:30height:20background-color:red'&&/div&&div&id='d2'&style='display:width:30height:20background-color:blue'&&/div&&div&id='d3'&style='display:width:30height:20background-color:yellow'&&/div&&input&type=button&value=&Toggle&&onclick='toggleDiv()'&&script&//&全局变量var&divs=[];var&divCnt&=&3;&//div&数量&for&(var&i=0;i&divCi++)&{&&&divs[i]&=&document.getElementById(&d&+(i+1));}var&selectedDiv&=&0;function&toggleDiv(){&&&&selectedDiv++;&&&&selectedDiv&=&selectedDiv&%&divC&//&&&&for&(var&i=0;i&&divCi++)&{&&&&&&&divs[i].style.display=&none&;&&&&&}&&&&divs[selectedDiv].style.display=&block&;&&}&&&&&/script&jquery&如果你没用过,&暂时先这样调吧.
提问者评价
谢谢了 知道思路了
其他类似问题
为您推荐：
其他1条回答
}}&/div&quot.display=&+i)，显示的变为隐藏用jQuery一句话搞定;jquery&+i);function aaa(){
count=count%3+1.toggle();js
jQuery(&script&gt，那我就再写个;+i);/#d&.getElementById(&script&/&#d&//d&d& 意思是;i&).display=&quot.
for(var i=1;+i).show()。既然楼主的需求是这样的;i++)
if(count==i)
jQuery(&quot.hide();var count=1;。也可以分类进行，所有div隐藏的变成显示。jQuery(&quot.getElementById(&quot。两种只选择一种就行&4
div的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁js&点击同一个按钮显示隐藏切换代码
type="text/javascript"&
& & function showme(){
& var div = document.getElementByIdx_x("test");
& if (div.style.display == "block") {
div.style.display = "none";
& } else if (div.style.display == "none") {
div.style.display = "block"
&img src="logo.png" onclick="showme()"
&div id="test"
style="background-color:Owidth:200height:200display:block"&&/div&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。jquery 显示隐藏div方法show(),hide(),toggle(),slideDown()总结
来源：&&&时间： 20:25:28&&&阅读数：
[导读] 在jquery中显示隐藏div方法方法有很多种，如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作，下面我来介绍。show()方法显示出隐藏的 &p& 元素。
代码如下复制代
在jquery中显示隐藏div方法方法有很多种，如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作，下面我来介绍。
show()方法显示出隐藏的 &p& 元素。
$(&.btn2&).click(function(){& $(&p&).show();});
toggle()方法toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
&html&&head&&script type=&text/& src=&//jquery.js&&&/script&&script type=&text/javascript&&$(document).ready(function(){& $(&.btn1&).click(function(){& $(&p&).toggle(1000);& });});&/script&&/head&&body&&p&This is a paragraph.&/p&&button class=&btn1&&Toggle&/button&&/body&&/html&
slideDown()方法以滑动方式显示隐藏的 &p& 元素：
$(&.btn2&).click(function(){& $(&p&).slideDown();});
hide() 方法隐藏可见的 &p& 元素：
$(&.btn1&).click(function(){& $(&p&).hide();});
这个函数经常与show一起使用css()方法css() 方法设置或返回被选元素的一个或多个样式属性。返回 CSS 属性如需返回指定的 CSS 属性的值，请使用如下语法：
css(&propertyname&);$(&p&).css(&display&,&none&);
看一个实例
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &script type=&text/javascript&& $(document).ready(& function(){}); function hiden(){ $(&#divObj&).hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast } function slideToggle(){ $(&#divObj&).slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 } function show(){ $(&#divObj&).show();//显示,参数说明同上 } function toggle(){ $(&#divObj&).toggle(2000);//显示隐藏切换,参数可以无,参数说明同上 &} function slide(){ $(&#divObj&).slideDown();//窗帘效果展开 } &&/script& &/head& &&body& &h3&div里内容的显示隐藏特效&/h3& &input type=&button& value=&隐藏& onclick=&hiden()&/& &&input type=&button& value=&显示& onclick=&show()&/& &&input type=&button& value=&窗帘效果显示2& onclick=&slide()&/& &&input type=&button& value=&窗帘效果的切换& onclick=&slideToggle()&/& & &input type=&button& value=&隐藏显示效果切换& onclick=&toggle()&/& &div id=&divObj& style=&display:none&& &&&&&&& 1.测试例子&br/& &&&&&&& 2.测试例子&br/& &&&&&&& 3.测试例子&br/& &&&&&&& 4.测试例子&br/& &&&&&&& 5.测试例子&br/& &&&&&&& 6.测试例子&br/& &&&&&&& 7.测试例子&br/& &&&&&&& 8.测试例子&br/& &&&&&&& 9.测试例子&br/& &&&&&&& 0.测试例子&br/& &&& &/div& &/body& &/html&
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接原文地址：
延伸阅读 More
视频教程 Video
网站服务：
会员问题 :
友情链接 :
网站投稿 :
@php100官方
php100官方微信
Copyright (C) 2007-, All Rights Reserved 版权所有 粤ICP备号-4
粤ICP备号-3