仿淘宝网产物列表的收起睁开、潜匿表当代码

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

导读：Java Script仿淘宝网产物列表的收起与睁开，平常状态它是紧缩起来的，也就是说不表现全部的内容，当用户必要看全部内容的时辰可以点击睁开的按钮，点击后全部内容表现出来，再次点击，则回到合拢状态，这是一个常用的网页结果。示例： !DOCTYPE htmlhtml

　　JavaScript仿淘宝网产物列表的收起与睁开，平常状态它是紧缩起来的，也就是说不表现全部的内容，当用户必要看全部内容的时辰可以点击睁开的按钮，点击后全部内容表现出来，再次点击，则回到合拢状态，这是一个常用的网页结果。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无问题文档</title> <style type="text/css"> #main { width:500px; font-size:12px; border:1px solid #FFC44C; } #box1 { width:500px; height:80px; } .box2 { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFC44C solid; } .boxS { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFE6B3 solid;margin-bottom:1px; } .box3 { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:none; } .boxt { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:block; } #box4 { width:500px; height:5px; background:#FFF7E5; position:relative; } #box4 span { width:80px; border:1px #FFC44C solid; position:absolute; left:40%; top:5px; background:#FFF7E5; border-top:none; text-align:center; cursor:pointer; } </style> <script type="text/javascript"> window.onload=function(){ var box_2 = document.getElementById("box2"); var box_3 = document.getElementById("box3"); var box_4 = document.getElementById("box4").getElementsByTagName("span")[0]; box_4.onclick=function(){ box_3.className=(box_3.className=="box3")?"boxt":"box3"; box_2.className=(box_2.className=="boxS")?"box2":"boxS"; this.innerHTML=(this.innerHTML=="Show")?"Hidden":"Show"; } } </script> </head> <body> <div id="main"> <div id="box1"></div> <div id="box2" class="boxS"></div> <div id="box3" class="box3"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> <div id="box4"><span>Show</span></div> </div> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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