标签:html dtd 代码 ble public eee eve header 演示
<!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/html; charset=UTF-8"> <style> .pay-header { width: 500px; margin: 0 auto; clear: both; } .pay-header ul { border-bottom: 3px solid #5fb1e0; padding: 20px; overflow: hidden; position: relative; font-size: 14px; line-height: 22px; color: #3d474a; background: #eee; } .pay-header li { padding-right: 100px; overflow: hidden; zoom: 1; display: none; } .pay-header li.shopname { display: block; } .pay-header a.btn-det { position: absolute; right: 10px; padding-bottom: 12px; padding-left: 20px; color: #257bd4; text-decoration: none; font-size: 12px; } .pay-header ul .text i { width: 100%; display: inline-block; font-style: normal; } .pay-header ul .lab { width: 77px; float: left; } .pay-header ul .text { float: left; } </style> <title>RunJS 演示代码</title> </head> <body> <div class="pay-header"> <ul id="order-ul"> <a href="javascript:;" class="btn-det" id="order-a">订单详情</a> <li><span class="lab">商品名称:</span><span class="text"><i>婴儿冬装连体衣服加厚</i><i>婴儿冬装连体衣服加厚宝宝 </i><i>共2件</i></span></li> <li><span class="lab">交易金额:</span><span class="text">29.80元</span></li> <li><span class="lab">购买时间:</span><span class="text">2014年12月2日 15:21:14</span></li> <li><span class="lab">交易号 :</span><span class="text">2014120221001001970043444953</span></li> <li class="shopname" id="order-show"><span class="lab">交易商户:</span><span class="text">蓓莱乐</span></li> <li><span class="text">婴儿冬装连体衣服加厚</span></li> </ul> </div> <script> window.onload = function () { var oul = document.getElementById("order-ul"); var oli = oul.getElementsByTagName("li"); var oshow = document.getElementById("order-show"); var oa = document.getElementById("order-a"); oul.onclick = function (event) { (event || window.event).cancelBubble = true } oa.onclick = function (event) { for (i = 0; i < oli.length; i++) { oli[i].style.display = oli[i].style.display == "block" ? "none" : "block"; } oshow.style.display = "block"; //阻止事件冒泡 (event || window.event).cancelBubble = true }; document.onclick = function () { for (i = 0; i < oli.length; i++) { oli[i].style.display = "none"; } oshow.style.display = "block"; }; } </script> </body> </html>
标签:html dtd 代码 ble public eee eve header 演示
原文地址:http://www.cnblogs.com/jan-wen/p/7673794.html