会更换背景的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导航条