<!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" /> <title>Tab選項卡</title> <style type="text/css"> body {font-size: 12px;} ul {margin: 0;padding: 0;list-style: none;overflow: hidden;} ul li {float: left;height: 25px;line-height: 25px;padding: 0 10px;cursor:pointer;} #cn-lazy,#cn-lazy2{width: 380px;height: 180px;} #cn-lazy div,#cn-lazy2 div{width: 380px;height: 165px;clear: both;display: none;} .cn-current {background: #CCC;} </style> </head> <body> <div id="cn-lazy"> <ul> <li class="cn-current">選項卡一</li> <li>選項卡二</li> <li>選項卡三</li> </ul> <div style="display:block">內容一</div> <div>內容二</div> <div>內容三</div> </div> <div id="cn-lazy2"> <ul> <li class="cn-current">選項卡一</li> <li>選項卡二</li> <li>選項卡三</li> </ul> <div style="display:block">內容一</div> <div>內容二</div> <div>內容三</div> </div> <script type="text/javascript"> function cnTab(cnTable,cnNum){ var Tab= document.getElementById(cnTable).getElementsByTagName("ul"); Tab=Tab[0].getElementsByTagName("li"); var cnDiv= document.getElementById(cnTable).getElementsByTagName("div"); var TabNum = Tab.length; var cnDivNum=cnDiv.length; for(i=0;i<TabNum; i++){ Tab[i].className = ""; } Tab[cnNum].className = "cn-current"; for(i=0;i<cnDivNum;i++){ cnDiv[i].style.display = "none"; } cnDiv[cnNum].style.display = "block"; } window.onload=function(){ var TabId=new Array("cn-lazy","cn-lazy2") for(j=0;j<TabId.length;j++){ var Tab= document.getElementById(TabId[j]).getElementsByTagName("ul"); Tab=Tab[0].getElementsByTagName("li"); for(i=0;i<Tab.length;i++){ Tab[i].DivId=TabId[j]; Tab[i].LiId=i; Tab[i].onclick=function(){ cnTab(this.DivId,this.LiId); } } } } </script> </body> </html></td> </tr> </table>