提示：您可以先修改部分代碼再運行
<!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><title>javascript簡單實用的選項卡導覽功能表</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代碼加到<head>與</head>之間--><style type="text/css">#header{background-color:#F8F4EF;height:200px;width:400px;border:1px solid #ECE1D5;font-family:"宋體";font-size:12px;}#menu{margin:0;padding:0;list-style-type:none;}#menu li{display:block;width:100px;line-height:23px;text-align:center;float:left;cursor:pointer;}.sec1{background-color:#FFFFCC;}.sec2{background-color:#00CCFF;}.block{display:block;}.unblock{display:none;}</style><script language="javascript">function secBoard(n){var menu=document.getElementById('menu').getElementsByTagName('li');var main=document.getElementById('main').getElementsByTagName('li');for(i=0;i<menu.length;i++){menu[i].className="sec1";}menu[n].className="sec2";for(i=0;i<main.length;i++){main[i].style.display="none";}main[n].style.display="block";}</script></head><body><!--把下面代碼加到<body>與</body>之間--><div id="header"><ul id="menu"><li onMouseOver="secBoard(0)" class="sec2">最新新聞</li><li onMouseOver="secBoard(1)" class="sec1">最新文章</li><li onMouseOver="secBoard(2)" class="sec1">最新日誌</li><li onMouseOver="secBoard(3)" class="sec1">論壇新帖</li></ul><ul id="main"><li class="block">第一個內容：預防蜱蟲必知的11個知識問答</li><li class="unblock">第二個內容：購物商城限時搶購，倒計時JS代碼</li><li class="unblock">第三個內容：落魄千萬富翁的一首歌－很man</li><li class="unblock">第四個內容：七十六個網站使用者體驗要點</li></ul></div></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
