本文實例講述了JS實現的最簡Table選項卡效果。分享給大家供大家參考。具體如下：
這是一款最簡易的Table選項卡，是基于Table表格的，非DIV結構，習慣表格的朋友可能會喜歡本選項卡，部分修飾仍然用的是Table，比如表格邊框、背景顏色等，個人感覺好像用Table比用DIV結構代碼更精簡一些。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-z-simple-tab-nav-menu-codes/
具體代碼如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>選項卡</title><style type="text/css"><!--.menu1 { font-size: 14px; color: #FFFFFF; text-decoration: none; background-color: skyblue; cursor:hand;}.menu2 { font-size: 14px; color: #990000; text-decoration: none; background-color: #FFFFFF; cursor:hand;}--></style><script language="JavaScript">function tabit(id,cid) {tab1.className="menu2";tab2.className="menu2";id.className="menu1";ctab1.style.display="none";ctab2.style.display="none";cid.style.display="block";}</script></head><body onload="tabit(tab1,ctab1)"><table width="400" height="169" border="0" cellpadding="3" cellspacing="1" bgcolor="#990000"> <tr> <td height="20" class="menu1" id="tab1" onmouseover="tabit(tab1,ctab1)">今日焦點</td> <td height="20" class="menu2" id="tab2" onmouseover="tabit(tab2,ctab2)">一周熱門</td> </tr> <tr id="ctab1" style="display:none"> <td height="100" colspan="2" bgcolor="#FFFFFF">今日焦點的內容</td> </tr> <tr id="ctab2" style="display:none"> <td height="100" colspan="2" bgcolor="#FFFFFF">一周熱門的內容</td> </tr></table></body></html>希望本文所述對大家的JavaScript程序設計有所幫助。
新聞熱點
疑難解答
