<style type="text/css">
<!--
body,div,img,a,b,p,form,table,tr,td{text-align: center; margin: 0px;padding: 0px;list-style-type:none;font-size:12px;color:#0c0c0b; line-height:120%}
body{background-color:#fff}
a{text-decoration:none;}
a:hover{text-decoration:underline; color:#0f9327}
.a1{text-decoration:underline; color:#b7f124}
.a1:hover{text-decoration:underline; color:#f8efae}
.f1{font-size:14px;}
.c1{color:#ff7200}
.c2{color:#FFFFFF}
.c3{color:#f8efae}
.c4{color:#32633b}
.c4{color:#0F9327}
.ent_l{width:190px; height:325px; background:#48a6e9; float:left;}
.ent_c{width:342px; height:325px; background-color:#FFFFFF; float:left; overflow:hidden}
.bq{width:342px; height:71px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_d.gif) no-repeat;}
.bq ul{padding:0px; margin:0px; list-style-type:none;}
.bq li{width:88px; height:23px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_2.gif) 0px 1px no-repeat; padding-top:3px; margin-top:43px; text-align:center; float:left; cursor:pointer;}
.bq li a{font-size:12px; font-weight:bold; color:#59814c;}
.bq li a:hover{text-decoration:none;}
.bq li.on{background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_1.gif) no-repeat top; color:#fff;}
.bq li.on a{color:#fff;}
.bq_d{width:100%; height:253px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/line_2.gif) right repeat-y; border-bottom:#0f9327 1px solid; text-align:left}
.bq_n{width:80%; padding-top:15px; text-align:center; margin-left:30px}
.bq_d .c4{ text-align:left}
.clear{ clear:both; font-size:0; height:0}
-->
</style>
<script language="JavaScript">
<!--
var nTime = 3;
var nFocus= 0;
var bFlag = false;
var aLiTab , aDivTab;
window.onload = function(){
var $ = function($){
return document.getElementById($);
};
aLiTab = $("oUlTab").getElementsByTagName("li");
aDivTab = [$("oDivTab1") , $("oDivTab2") , $("oDivTab3")];
for(var i=0;i<aLiTab.length;i++){
(function(i){
var t = aLiTab[i];
t.onmouseover = function(){
if(nFocus != i){
aLiTab[nFocus].className = "";
aDivTab[nFocus].style.display = "none";
nFocus = i;
aLiTab[nFocus].className = "on";
aDivTab[nFocus].style.display = "";
}
bFlag = true;
};
t.onmouseout = function(){
bFlag = false;
};
})(i);
}
};
//-->
</script>
</head>
<body>
<div class="ent_c">
<div class="bq">
<ul id="oUlTab"><li class="on" ><a href="#">多窗口操作</a></li>
<li ><a href="#">超快速度</a></li>
<li ><a href="#">自动保存</a></li>
</ul>
</div>
<!---多窗口操作--->
<div class="bq_d" id="oDivTab1">
<div class="bq_n">
<img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/dbq.gif" /><br />
<div class="c4"> 逍遥3.0版本支持多窗口操作，你可以在不同邮件之间轻松快速切换。<br />
新版本有点像时下最流行的多页面式IE浏览器，可以在一个窗口中同时打开多个页面，切换响应速度之快令人惊奇，大大提高了工作效率。<br />
</div>
</div>
</div>
<div class="bq_d" id="oDivTab2" style="display:none">
<div class="bq_n">
<img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/cksd.gif" /><br />
<div class="c4"> 让邮箱的速度越来越快一直是我们追求的目标。逍遥3.0大量页面使用了创新Ajax技术， 同等网络环境下，页面响应时间减少90％以上，快来体验前所未有的快速邮箱操作吧！<br />
</div>
</div>
</div>
<div class="bq_d" id="oDivTab3" style="display:none">
<div class="bq_n">
<img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/zdbc.gif" /><br />
<div class="c4"> 你再也不用担心辛苦所写的邮件会因网络、电力中断等问题而丢失。126逍遥3.0邮箱系统会自动保存正在录入的邮件，从此高枕无忧。<br />
</div>
</div>
</div>
</div>
</body>
这个代码是有三个标签,如果我想把他弄成四个,我只是改了aDivTab = [$("oDivTab1") , $("oDivTab2") , $("oDivTab3") , $("oDivTab4")];
还有在后面加了一点点内容,但不知怎么的,能显示标签,但不能显示下面的内容,是什么原因呀?
[此贴子已经被作者于2007-8-6 9:33:23编辑过]
