會更換背景的TAB選項卡

2024-09-05 12:19:21

字體：大中小

來源：轉載

供稿：網友

一款TAB選項卡代碼，基本是用JS實現的，CSS代碼很少，不過這正是這段代碼好的地方，可優化的代碼很多，這里給你提供原始的代碼，當鼠標移到某一欄目時，另邊的內容區的背景會跟著變換，這是和其它選項卡不一樣的地方。

<html><head><title>會更換背景的TAB選項卡</title><SCRIPT LANGUAGE="JavaScript"></script><body><p><table border="0" width="370" bgcolor="black" cellpadding="3" cellspacing="0" align="center"><tr><td><table border="0" width="370" cellpadding="0" cellspacing="0"><tr><td><table border="0" width="160" bgcolor="#F88530" cellpadding="8" cellspacing="0"><tr>  <td onclick="window.location='#'" onmouseover="bgColor='#FF9900'; show_text(0,'div1')" onmouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>ASP</b></td></tr><tr>  <td onclick="window.location='#'" onMouseover="bgColor='#D1FD80'; show_text(1,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>PHP</b></td></tr><tr>  <td onclick="window.location='#'" onMouseover="bgColor='#FDB9FD'; show_text(2,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>JSP</b></td></tr><tr>  <td onclick="window.location='#'" onMouseover="bgColor='#FFFF5E'; show_text(3,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>CIG</b></td></tr><tr>  <td onclick="window.location='#'" onMouseover="bgColor='#C2D7FC'; show_text(4,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>AJAX</b></td></tr></table></td><td><span id="div1"><table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>鼠標移到欄目上看效果！</b></td></tr></table></span></td></tr></table></td></tr></table></body></html>

上一篇：CSS導航菜單

下一篇：DIV+CSS導航條