在浏览网站的时候，阅读网站上的很多分类文章，类似IE8的单窗口模式，很受网路人员的喜爱，其实实现原理很简单，由于好久没发文章了，本人先发一篇灌水性文章，虽然实用性很强，但技术实现那是相当简单，简单介绍一下：里面抓住两个知识点： 一、关于层的相对定位； 二、对于传递this关键字存在于数组中的位置； 看看下面的代码吧：
CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style> <!-- body{padding:0px; margin:10px;} *{ font-size:12px;} .cHead{ height:26px; line-height:26px; padding-left:4px;} .cHead li{ float:left; display:inline; margin-left:-1px; position:relative; padding-left:4px; padding-right:4px; cursor:pointer;} .cMenuon{ background:#FFF; border:1px #3C9 solid; height:27px; border-bottom:0px; line-height:27px; margin-bottom:-1px;} .cMenuout{ background:#EBEBEB; border:1px #3C9 solid; height:24px; border-bottom:0px; line-height:24px; margin-top:2px;} .cBody{ border:1px #3C9 solid;} --> </style> <script> <!-- function setMenuStyle(obj){ var j; var cBody = document.getElementById("cBody"); var cMenus = obj.parentNode.getElementsByTagName('li'); for(i=0;i<cMenus.length;i++){ cMenus[i].className = 'cMenuout'; cBody.rows[i].cells[0].style.display = 'none'; if(obj == cMenus[i]){ j = i; } } obj.className = 'cMenuon'; cBody.rows[j].cells[0].style.display = 'block'; } --> </script> </head> <body> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="26" class="cHead"> <li class="cMenuon" onClick="setMenuStyle(this)">功能导航一</li> <li class="cMenuout" onClick="setMenuStyle(this)">功能导航二</li> <li class="cMenuout" onClick="setMenuStyle(this)">功能导航三</li> </td> </tr> <tr> <td align="left" valign="top" class="cBody"> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="cBody"> <tr> <td style="display:block"> <div style="margin:0 auto; text-align:center"> <p style="font-size:24px; font-weight:bold;">无法连接到服务器，请检查网络</p> <p>点击<span style="color:#F00; text-decoration:underline; cursor:pointer">[刷新]</span>尝试重新链接</p> </div> </td> </tr> <tr> <td style="display:none"> <div style="margin:0 auto; text-align:center"> <p style="font-size:24px; font-weight:bold;">对不起，你访问的页面不存在</p> <p>请确认你输入的地址是否正确</p> </div> <br /> </td> </tr> <tr> <td style="display:none"> <div style="margin:0 auto; text-align:center"> <p style="font-size:24px; font-weight:bold;">对不起，此网页已过期</p> </div> </td> <br /> </tr> </table> </td> </tr> </table> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
能不用table做出来实用性就更强了
完全可以呀！~你主要看用到什么地方嘛，哪种方便就用哪种！~
能不用table做出来实用性就更强了
完全可以呀！~你主要看用到什么地方嘛，哪种方便就用哪种！~