一个简朴的睁开紧缩、表现潜匿结果

发布时间：2018-08-18 10:49:21 所属栏目：活动来源：站长网

导读：一个简朴的睁开紧缩、表现潜匿结果，行使JS实现的，着实就是折叠层的结果，点击睁开内容，再点击就封锁潜匿了内容，在一些因为时刻相关，没有颠末太多美化，较量粗拙，假如您偶然刻可以美化一下！示例： !doctype htmlhtmlheadmeta http-equiv=Content-Ty

　　一个简朴的睁开紧缩、表现潜匿结果，行使JS实现的，着实就是折叠层的结果，点击睁开内容，再点击就封锁潜匿了内容，在一些因为时刻相关，没有颠末太多美化，较量粗拙，假如您偶然刻可以美化一下！

　　示例：

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>表现与潜匿</title> <style type="text/css"> * { padding:0; margin:0; } body { font:14px verdana; margin-top:50px; } #tc { width:780px; margin:0 auto; } #sb,#c { border:1px solid #85acfe; } dl { background:#f3faff; } dl dt { background:#e4edff; } dl dt a { cursor:pointer; } dl dt a:hover{ color:#f00; } dl dd { height:20px; } </style> </head> <body> <div id="tc"> <div id="sb"> <dl> <dt><a href="javascript:void(0)" onclick=Uhos(this)>表现潜匿</a></dt> <dd>猛火veryhuo.com</dd> <dd>猛火veryhuo.com</dd> <dd>猛火veryhuo.com</dd> <dd>猛火veryhuo.com</dd> <dd>猛火veryhuo.com</dd> <dd>猛火veryhuo.com</dd> <dd>猛火veryhuo.com</dd> </dl> </div> <div id="c"> <dl> <dt><a href="javascript:void(0)" onclick=Uhos(this)>表现潜匿</a></dt> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> <dd>- - - - - - - -</dd> </dl> </div> </div> <script type="text/javascript"> function Uhos(obj){ var lis=document.getElementById("sb").getElementsByTagName("dd"); for (i=0;i<lis.length;i++){ if (lis[i]!=obj){ lis[i].style.display=lis[i].style.display==""?"none":""; } else{ lis[i].style.display=lis[i].style.display==""?"":""; } } } </script> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!