javascript 实现的美丽选项卡
效果图：
js代码 ：
<SCRIPT>
function doClick(o){
o.style.backgroundImage='url(images/over.jpg)'
o.innerHTML="<span style='color:#F08200;'>" + o.innerHTML +"</span>";
}
function doOut(o){
o.style.backgroundImage=''
}
</SCRIPT>
<div class="promenun">
<ul>
<li>现代风格</li>
<li style="MARGIN-LEFT: 2px"><div onmouseover="javascript:doClick(this)" onmouseout="javascript:doOut(this)">现代风格</div></li>
<li style="MARGIN-LEFT: 2px"><div onmouseover="javascript:doClick(this)" onmouseout="javascript:doOut(this)">现代风格</div></li>
</ul>
</div>
注：
<SCRIPT>
function doClick(o){
o.style.backgroundImage='url(images/over.jpg)'
o.style.color='#f08200'
}
function doOut(o){
o.style.backgroundImage=''
o.style.color='#949694'
}
</SCRIPT>
注2：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="hdyg.ascx.cs" Inherits="webcontrollers_hdyg" %>
<div id="hdygs" style="float:left; width:222px;">
<div class="Menubox" style="background:url(../images/hdyg.jpg)">
<ul >
<li><div id="v1" onmouseover="javascript:doClick(this,2)" onmouseout="javascript:doOut(this)" style="color:#949694;">活动预告</div></li>
<li><div id="v2" onmouseover="javascript:doClick(this,2)" onmouseout="javascript:doOut(this)">公司动态</div></li>
</ul>
</div>
<div id="e1" style=" border-left: #c2c2c2 1px solid; border-right: #c2c2c2 1px solid; border-bottom:#c2c2c2 1px solid;">
<ul style=" padding-top:15px;text-align:left; padding-left:10px;">
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
</ul>
</div>
<div id="e2" style=" display:none; border-left: #c2c2c2 1px solid; border-right: #c2c2c2 1px solid; border-bottom:#c2c2c2 1px solid;">
<ul style=" padding-top:15px;text-align:left; padding-left:10px;">
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> x迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="../images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
</ul>
</div>
</div>
<SCRIPT>
function doClick(o,n){
o.className="over"
var id = o.id+"";
var dd=id.substring(2,1);
document.getElementById("e"+dd).style.display="block"
var j;
var id;
var e;
for(var i=1;i<=n;i++){
id ="v"+i;
j = document.getElementById(id);
e = document.getElementById("e"+i);
if(id != o.id){
j.className="out";
e.style.display = "none";
}
}
}
</SCRIPT>
分析：为什么不用 visibility控制？
当用visibility控制时，div所占区域是不会改变的，会留下空白！
参考：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>东莞市道远装饰工程有限公司</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<SCRIPT>
function doClick(o,n){
o.className="over"
var id = o.id+"";
var dd=id.substring(2,1);
document.getElementById("e"+dd).style.display="block"
var j;
var id;
var e;
for(var i=1;i<=n;i++){
id ="v"+i;
j = document.getElementById(id);
e = document.getElementById("e"+i);
if(id != o.id){
j.className="out";
e.style.display = "none";
}
}
}
function doClickf(o,n){
o.className="overf"
var id = o.id+"";
var dd=id.substring(2,1);
document.getElementById("ef"+dd).style.display="block"
var j;
var id;
var e;
for(var i=1;i<=n;i++){
id ="f"+i;
j = document.getElementById(id);
e = document.getElementById("ef"+i);
if(id != o.id){
j.className="outf";
e.style.display = "none";
}
}
}
function doClickk(o,n){
o.className="overk"
var id = o.id+"";
var dd=id.substring(2,1);
document.getElementById("ek"+dd).style.display="block"
var j;
var id;
var e;
for(var i=1;i<=n;i++){
id ="k"+i;
j = document.getElementById(id);
e = document.getElementById("ek"+i);
if(id != o.id){
j.className="outk";
e.style.display = "none";
}
}
}
</SCRIPT>
</head>
<body>
<form id="form1" runat="server">
<div style="width:1006px; text-align:left; text-indent:2px;">
<img src="images/head.jpg" width="957" height="163" />
</div>
<div style="width:1006px; overflow:hidden;">
<div style=" margin-left:49px; height:265px;">
<div id="topleft" style="float:left; width:117px; margin-right:20px;"><img src="images/topleft.jpg"/></div>
<div id="bhdh" style="float:left; width:520px; margin-right:20px;"><img src="images/bh.jpg"/></div>
<div id="hdygs" style="float:left; width:222px;">
<div class="Menubox" style="background:url(images/hdyg.jpg)">
<ul >
<li><div id="v1" onmouseover="javascript:doClick(this,2)" onmouseout="javascript:doOut(this)" class="over">活动预告</div></li>
<li><div id="v2" onmouseover="javascript:doClick(this,2)" onmouseout="javascript:doOut(this)">公司动态</div></li>
</ul>
</div>
<div id="e1" style=" border-left: #c2c2c2 1px solid; border-right: #c2c2c2 1px solid; border-bottom:#c2c2c2 1px solid;">
<ul style=" padding-top:15px;text-align:left; padding-left:10px;">
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
</ul>
</div>
<div id="e2" style=" display:none; border-left: #c2c2c2 1px solid; border-right: #c2c2c2 1px solid; border-bottom:#c2c2c2 1px solid;">
<ul style=" padding-top:15px;text-align:left; padding-left:10px;">
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> x迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
<li><div style="height:26px; line-height:26px;"><img src="images/icon1.gif"/> 迎新年优惠活动开始了!</div></li>
</ul>
</div>
</div>
</div>
<div>
<div id="left" style="float:left; width:265px; text-indent:45px; margin-right:4px;">
<div><img src="images/jqgd.jpg" /></div>
<div style="width:209px; border-left: #c2c2c2 1px solid; border-right: #c2c2c2 1px solid; margin-left:49px;">
<ul style="margin-top:7px;">
<li><div style=" line-height:25px; height:25px;"><img src="images/icon1.gif"/> 财富时代大厦办公室工装</div></li>
<li><div style=" line-height:25px; height:25px;"><img src="images/icon1.gif"/> 财富时代大厦办公室工装</div></li>
<li><div style=" line-height:25px; height:25px;"><img src="images/icon1.gif"/> 财富时代大厦办公室工装</div></li>
<li><div style=" line-height:25px; height:25px;"><img src="images/icon1.gif"/> 财富时代大厦办公室工装</div></li>
<li><div style=" line-height:25px; height:25px;"><img src="images/icon1.gif"/> 财富时代大厦办公室工装</div></li>
</ul>
</div>
<div><img src="images/left.jpg" /></div>
</div>
<div id="middle" style="float:left; width:700px; margin-left:4px;">
<div>
<div class="promenu">
<ul>
<li><div id="f1" onmouseover="javascript:doClickf(this,4)" onmouseout="javascript:doOut(this)" class="overf">现代风格</div></li>
<li style="MARGIN-LEFT: 2px"><div id="f2" onmouseover="javascript:doClickf(this,4)" onmouseout="javascript:doOut(this)">现代风格</div></li>
<li style="MARGIN-LEFT: 2px"><div id="f3" onmouseover="javascript:doClickf(this,4)" onmouseout="javascript:doOut(this)">现代风格</div></li>
<li style="MARGIN-LEFT: 2px"><div id="f4" onmouseover="javascript:doClickf(this,4)" onmouseout="javascript:doOut(this)">现代风格</div></li>
</ul>
</div>
<div id="ef1" class="cplist">
<ul>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 1阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
</ul>
</div>
<div id="ef2" class="cplist" style="display:none;">
<ul>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 2阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
</ul>
</div>
<div id="ef3" class="cplist" style="display:none;">
<ul>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 3阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
</ul>
</div>
<div id="ef4" class="cplist" style="display:none;">
<ul>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 4阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
</ul>
</div>
</div>
<div style="margin-top:15px;">
<div class="promenun">
<ul>
<li><div id="k1" onmouseover="javascript:doClickk(this,3)" onmouseout="javascript:doOut(this)" class="overf">现代风格</div></li>
<li style="MARGIN-LEFT: 2px"><div id="k2" onmouseover="javascript:doClickk(this,3)" onmouseout="javascript:doOut(this)">现代风格</div></li>
<li style="MARGIN-LEFT: 2px"><div id="k3" onmouseover="javascript:doClickk(this,3)" onmouseout="javascript:doOut(this)">现代风格</div></li>
</ul>
</div>
<div id="ek1" class="cplist">
<ul>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 1阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
</ul>
</div>
<div id="ek2" class="cplist" style="display:none;">
<ul>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 2阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
</ul>
</div>
<div id="ek3" class="cplist" style="display:none;">
<ul>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 3阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
<li><img src="images/cp.jpg" height="85"/><br/><div style="height:32px; text-align:left; margin-top:8px;"><img src="images/Arrow.gif" width="9" height="9"/> 阳光美景城</div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center; margin-top:30px;">
<img src="images/bottom.jpg" width="1006" height="79" />
</div>
</form>
</body>
</html>