自己看了一下别人的一些代码，自己也学着做了个，一直知道这种层显示隐藏效果最关键的地方就是应用暂停（setTimeout及 clearTimeout）或是时间间隔（setInterval及clearInterval）成对应用制作成的。如果在执行一组指定的代码前等待一段时间，则使用暂停。如果要反复执行某些代码，就使用时间间隔。这个基本上是原理了。
再者，就是很多人在制作页面时，都喜欢用font-size:12px；来限制字体的大小，感觉这个是一个设计的错误，因为用户不能使用浏览器的文字大小功能对文字进行调解，不利于年纪大的人浏览，所以我使用了font:75% Verdana, Arial, Helvetica, sans-serif；百分比字体。这样如果别人感觉字体小就可以调整大小了，而且这个设置恰好是12像素的字体大小。呵呵，在做项目时突然发现的。如果有知道的，请多给些宝贵建议，代码如下：
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div动画显示</title>
<style>
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content { height:300px;overflow:hidden}
</style>
<script>
function $(element){
return element = ElementById(element);
}
function $D(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=50; //设置层展开的速度
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=50;//设置层收缩的速度
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$('class1content');
var sb=$('stateBut');
if(d.style.display=='none'){
$D();
sb.innerHTML='展开';
}else{
$D2();
sb.innerHTML='收缩';
}
}
</script>
</head>
div border属性<body>
<div class="class1">
<h1>*自己</h1>
<span id="stateBut" onclick="$use()">展开</span>
<p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
妈妈：因为我们的身体没有骨骼的支撑
，只能爬，又爬不快。所以要这个壳的保护！<br />
小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
蜗牛妈妈安慰他：所以我们有壳啊！我们不*天，也不*地，我们*自己。</p>
</div>
</body>
</html>
一个div层中有多个显示和隐藏 浏览次数：494次悬赏分：10 | 解决时间：2011-4-25 15:23 | 提问者：匿名
这个div层中是个表格，表格中有多条数据，每一条数据后都有一个显示链接可以查看隐藏的详细信息，但是我点击哪一行的显示都会显示第一行的隐藏域中的详细信息，怎么让它点击显示的时候出现相对应行的隐藏域的详细信息呢？问题补充：
<table >
<tr >
<td>
<div id="display" >
<a href="javascript:showdiv(1, '<%=index %>')">[显示]</a>
</div>
<div id="conceal" >
<a href="javascript:showdiv(2, '<%=index %>')">[隐藏]</a>
</div>
</td>
</tr>
<tr>
<td colspan="7">
<div id="detail<%=index %>" >
<table></table>
</div>
</td></tr> </table>
function showdiv(num, index){
if(num == 1){
}else if(num == 2){
}
这是我的后台代码，显示连接的就是div层中的表格
JS CSS 显示隐藏DIV 层 浏览次数：4015次悬赏分：10 | 解决时间：2011-1-11 17:32 | 提问者：junshaodou
我不懂JS， 你们给些力，看看这个JS，现在是用ID名的， 帮我改成 用class名 调用的，然后CSS 样式我只用写一个.class就行了
当然调用时要区分，就能写成CLASS+num 来区分，高手们帮我看看怎么写这个JS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
if (ElementById){
target=
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
-->
</script>
<style type="text/css">
#div1{ border:1px #06F solid;height:50px;width:100px;display:none;}
#div2{ border:1px #06F solid;height:50px;width:100px;display:none;}
a { display:block}
</style>
</head>
<body>
<a href="#" onclick="toggle('div1')">显示/隐藏</a>
<div id="div1"></div>
<a href="#" onclick="toggle('div2')">显示/隐藏</a>
<div id="div2"></div>
</body>
</html>
最佳答案 你这个问题，不就是不想写两遍同样的css样式么，
把ID换成class不行，因为js没法通过class控制div的属性
你可以id和class一起写啊，id用于js调用，class用来写样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
if (ElementById){
ElementById(targetid);
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}
-->
</script>
<style type="text/css">
.div{ border:1px #06F solid;height:50px;width:100px;display:none;}
a { display:block}
</style>
</head>
<body>
<a href="#" onclick="toggle('div1')">显示/隐藏</a>
<div id="div1" class="div"></div>
<a href="#" onclick="toggle('div2')">显示/隐藏</a>
<div id="div2" class="div"></div>
</body>
</html>
这样不就可以了么
求javascript/如何控制多个div层显示与隐藏，万分感谢 浏览次数：986次悬赏分：20 | 解决时间：2009-9-13 14:15 | 提问者：sys1980
想做如下效果出来：
<div id="center">
<div id="left">
<ul>
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">链接三</a></li>
<li><a href="#">链接四</a></li>
</ul>
</div>
<div id="right">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
</div>
我想点击左边的链接一显示右边的.a容器内容，其它隐藏。
点击二显示b容器的内容，其它隐藏，注意，这只是随便写点代码，假如左边有十个，或更多的超链接时，用javascript哪种方法更方便？本人刚入门，请各位大哥路过帮手。谢谢！！！！问题补充：
帮忙附个简单的代码
最佳答案 <script>
function showContent(num)
{
for(var i=0;i<right.children.length;i++)
{
right.children(i).style.display="none";
}
right.children(num).style.display="";
}
</script>
<div id="center">
<div id="left">
<ul>
<li><a href="#" onclick="showContent(0)">链接一</a></li>
<li><a href="#" onclick="showContent(1)">链接二</a></li>
<li><a href="#" onclick="showContent(2)">链接三</a></li>
<li><a href="#" onclick="showContent(3)">链接四</a></li>
</ul>
</div>
<div id="right" >
<div class="a" >一的内容</div>
<div class="b" >二的内容</div>
<div class="c" >三的内容</div>
<div class="d" >四的内容</div>
</div>
</div>
用DIV我怎么才能实现点一下“问题问题问题”
“答案：XXXXXXXXXX”这层出现，再点一下隐藏回去
1。问题问题问题
答案：XXXXXXXXXX
2。问题问题问题
答案：XXXXXXXXXX
3。问题问题问题
答案：XXXXXXXXXX问题补充：
我在网上也有到类似的，但是都只有一个层的显示隐藏，我就是不知道怎么改成多个问题多个显示隐藏层 。初始状态是不显示答案，点击才显示，再点击隐藏
其他回答 共4条
答案：YYYYYYYYYY 一样也有一样也有一样 回答者： 彭穿武 | 一级 | 2009-11-4 17:59
JS有很多这种代码，你到网上搜一下“js选项卡”就行。 回答者： 冰冷的期待 | 三级 | 2009-11-4 17:59
<html>
<body>
<div id="div1" onclick=checknum()>问题：我是啥？</div><br>
<div id="div2" >答案：我看你像猪</div>
<script type="text/javascript">
function checknum(){
var v =ElementById('div2');
if(v.style.display=='none'){
v.style.display='block';
}else{
v.style.display='none';
}
}
</script>
</body>
</html>
晕倒。要多个就随便改改就行了嘛。太懒了
<html>
<body>
<div id="a1" onclick=checknum(this)>问题1：我是啥？</div>
<div id="q1" >答案1：我看你像猪1</div><br>
<div id="a2" onclick=checknum(this)>问题2：我是啥？</div>
<div id="q2" >答案2：我看你像猪2</div><br>
<div id="a3" onclick=checknum(this)>问题3：我是啥？</div>
<div id="q3" >答案3：我看你像猪3</div><br>
<div id="a4" onclick=checknum(this)>问题4：我是啥？</div>
<div id="q4" >答案4：我看你像猪4</div><br>
<div id="a5" onclick=checknum(this)>问题5：我是啥？</div>
<div id="q5" >答案5：我看你像猪5</div><br>
<script type="text/javascript">
function checknum(obj){
var aid = obj.id; //拿到问题的div的id
var num = aid.substring(1,aid.length); //拿到id的后面的数字
var v =ElementById("q"+num); //q加上这个数字就是答案div的id，通过这个id拿到答案的div
if(v.style.display=='none'){
v.style.display='block';
}else{
v.style.display='none';
}
}
</script>
</body>
</html> 回答者： fulisheng007 | 五级 | 2009-11-5 09:08
多个的话复制粘贴就可以，不用改JS和ID什么的；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function blcokNo(obj){
var a=ElementsByTagName("div")[0];
if(a.style.display == "none"){
a.style.display = "block";
}else{a.style.display = "none";}
}
</script>
</head>
<body>
<div>
<h1 onclick="blcokNo(this)">1、问题问题</h1>
<div >答案：XXXXXXXXXX</div>
</div>
<div>
<h1 onclick="blcokNo(this)">2、问题问题</h1>
<div >答案：XXXXXXXXXX</div>
</div>
</body>
</html>
(套在答案外面DIV不可以换成其他标签，h1和最外面的div标签可以换的，但h1不能换成div，否则要改JS；)
JS控制DIV层显示与隐藏 2010-08-16 10:09:38| 分类： js+css+div | 标签：显示与隐藏 |字号大中小 订阅 .
用JS控制DIV层的隐藏与显示。页面中有三个DIV层，三个超级链接，实现的功能是点击一个链接，显示相应的DIV层，同时隐藏另外两个DIV层。
实例代码如下：
示例一
<html>
<head>
<script type="text/javascript">
function changeBody(index){
switch(index){
case 1:{
break;
}
case 2:{
break;
}
case 3:{
break;
}
}
}
</script>
</head>
<body>
<a href="javascript:changeBody(1)">模块A</a>
<a href="javascript:changeBody(2)">模块B</a>
<a href="javascript:changeBody(3)">模块C</a>
<div id="iDBody1"> 模块(一)的相关内容 </div>
<div id="iDBody2"> 模块(二)的相关内容 </div>
<div id="iDBody3"> 模块(三)的相关内容 </div>
</body>
</html>
示例二
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DIV-3</title>
<style type="text/css">
.
hiddiv {display:none}
</style>
<SCRIPT language=JavaScript>
<!-- function a(x){
for( i=0; i<divLen; i++ ){
if(allDiv[i].className=="hiddiv")
allDiv[i].style.display = "none"
if(allDiv[i].id=="div"+x)
allDiv[i].style.display = "block"
}
}
allDiv = ElementsByTagName("div");
divLen = allDiv.length
}
-->
</SCRIPT>
</head>
<body>
<div id="div1" class="hiddiv" >此处显示 id "div1" 的内容</div><br>
<div id="div2" class="hiddiv">此处显示 id "div2" 的内容</div><br>
<div id="div3" class="hiddiv">此处显示 id "div3" 的内容</div><br>
<div id="div4" class="hiddiv">此处显示 id "div4" 的内容</div><br>
<select onChange="a(value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
</html>
文章来自: CSS中国
评论这张
转发至微博
转发至微博 0人 | 分享到： 阅读(2051)| 评论(0)| 引用 (0) |举报 .
CSS+DIV底部固定漂浮导航
目前比较全面的浏览器CSS BUG兼容汇总.历史上的今天.
相关文章
单个按钮控制浮动DIV的隐藏与显示 JS+DIV实现层之间的切换效果，尤其对很多层时有用。 html style display||div style.display css控制div显示／隐藏方法及２种方法比较原码 .最近读者
雨潇潇
jaunary
huamiao1
jiayushu
★江南
liyuchen
majieli0
xiebo .评论
雨潇潇 取消
验证码：换一张
JS控制DIV层显示与隐藏时间:2010-01-03 15:58来源:CSS中国 作者：秩名 点击:3986次
用JS控制DIV层的隐藏与显示。页面中有三个 DIV 层，三个超级链接，实现的功能是点击一个链接，显示相应的DIV层，同时隐藏另外两个DIV层。 实例代码如下： 示例一 html head s
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论