选项卡之殇（为何代码被ff和opera hack了？）

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 430px;
margin: 0px;
border-bottom:1px #AACCEE solid;
background:#fff
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float:left;
width:32px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:427px;
background-color:#0000FF
margin: 0px ;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active";
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal";
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
}
}</script>
<style type="text/css">
#Layer21 { position:absolute;
left:573px;
top:113px;
width:428px;
height:177px;
z-index:41;
}-->
</style>
</head><body>
<div id="Layer21">
  <div class="nTab">    
    <div class="TabTitle" >
      <ul id="myTab0">
        <li class="active" style="width:auto"onmouseover="nTabs(this,0);">NG-QD</li>
        <li class="normal" onmouseover="nTabs(this,1);">3230</li>
        <li class="normal" onmouseover="nTabs(this,2);">6260</li>
        <li class="normal" onmouseover="nTabs(this,3);">6600</li>        <li class="normal" onmouseover="nTabs(this,4);">6630</li>
        <li class="normal" onmouseover="nTabs(this,5);">6670</li>
        <li class="normal" style="width:auto"onmouseover="nTabs(this,6);">6680/6681</li>
        <li class="normal" onmouseover="nTabs(this,7);">7610</li>
        <li class="normal" onmouseover="nTabs(this,8);">n70</li>
        <li class="normal" onmouseover="nTabs(this,9);">n72</li>        <li class="normal" onmouseover="nTabs(this,10);">n90</li>
        <li class="normal" onmouseover="nTabs(this,11);">其他</li>
      </ul>
    </div>
    
<div class="TabContent">
      <div id="mytab0_Content0">
  <p align="left"><a href="http://forum.younet.com/list16727.html">友人</a> <a href="http://club.joyes.com/board/board.aspx?boardid=7010">捉鱼</a> <a href="http://bbs.imobile.com.cn/forum-3934-1.html">imobile</a> <a href="http://bbs.dospy.com/forum-211-1.html">塞班</a> <a href="http://www.nokiacn.net/forum-191-1.html">糯米</a> <a href="http://nokia.it168.com/forum-111-1.html">it168</a> <a href="http://www.nokiabbs.com/forum-134-1.html">nokiabbs</a> <a href="http://bbs.blueshow.net/thread.php?fid=282">忧郁的蓝色</a></p></div>
      <div id="myTab0_Content1" class="none">
  <a href="http://forum.younet.com/16706.html">友人</a> <a href="http://club.joyes.com/board/board.aspx?boardid=1186">捉鱼</a> <a href="http://bbs.imobile.com.cn/forum-3936-1.html">imobile</a> <a href="http://bbs.dospy.com/forum-213-1.html">塞班</a> <a href="http://www.nokiacn.net/forum-167-1.html">糯米</a> <a href="http://nokia.it168.com/forum-111-1.html">it168</a> <a href="http://www.nokiabbs.com/forum-135-1.html">nokiabbs</a> <a href="http://bbs.blueshow.net/thread.php?fid=333">忧郁的蓝色</a><p align="right"><img src="nokia型号/5300.jpg" align="right"width="54" height="100" /></p></div>      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
      <div id="myTab0_Content6" class="none">111</div>      <div id="myTab0_Content7" class="none">222</div>
      <div id="myTab0_Content8" class="none">333</div>
      <div id="myTab0_Content9" class="none">444</div>
      <div id="myTab0_Content10" class="none">555</div>
  <div id="myTab0_Content11" class="none">444</div>
    </div>
  </div></body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【psterman】截止到2008-07-05 22:21:17的历史汇总数据(不包括此帖)：
发帖的总数量:0                        发帖的总分数:0
结贴的总数量:0                        结贴的总分数:0
无满意结贴数:0                        无满意结贴分:0
未结的帖子数:0                        未结的总分数:0
结贴的百分比:---------------------结分的百分比:---------------------
无满意结贴率:---------------------无满意结分率:---------------------
如何结贴请参考这里：http://topic.csdn.net/u/20080501/09/ef7ba1b3-6466-49f6-9d92-36fe6d471dd1.html
<html>
<head>
<style>
body
{
text-align:center;
}
.tab
{
width:432px;
height:208px;
margin:0 auto;
overflow:hidden;
border:1px solid #cccccc;
}
.menu,.menu li
{
margin:0;
padding:0;
height:24px;
list-style:none;
overflow:hidden;
text-align:center;
}
.menu
{
border-bottom:1px solid #cccccc;
}
.menu .default
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
font-weight:bold;
color:#FFFFFF;
background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
#more
{
width:76px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('bg.jpg') no-repeat;
color:#FF0000;
font-weight:normal;
text-align:right
}
.con
{
width:422px;
height:184px;
margin:0 auto;
}
</style>
<head>
<body>
<script>
function init(ids,cons,dis){
document.getElementById(ids).getElementsByTagName('li')[0].className='active';
document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
// document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果
document.getElementById(ids).onmouseover=function(e){onmousOver(ids,cons,dis,e);}//点击激发效果
}
function onmousOver(ids,cons,dis,e){
o = e || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
if (obj.className=='active'||obj.id=='more')return;
var o=document.getElementById(ids).getElementsByTagName('li');
for (var i=0;i<=o.length-1;i++){o[i].className='default'}

obj.className='active';
if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
</script>

<div class='tab'>
<ul id='nav1' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="l4" class='default'>第四新闻</li>
<li id="l5" class='default'>第5新闻</li>
</ul>
<div class='con' id='con1'>
</div>
</div>
<div></div>
<div></div>
<div></div>
<div style="display:none">
<div id="div1_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div1_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<div id="div1_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
<div id="div1_l4">
<span>当鼠标放上去时就变，而不用点了！</span>
</div>
<div id="div1_l5">
<span>增加了！</span>
</div>
</div>
<script>
init('nav1','con1',"div1_");
</script>

<div class='tab'>
<ul id='nav2' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="l4" class='default'>第四新闻</li>
<li id="more"><a href="#" target=_blank>更多>></a></li>
</ul>
<div class='con' id='con2'>
</div>
</div>
<div style="display:none">
<div id="div2_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div2_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<div id="div2_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
<div id="div2_l4">
<span>当鼠标放上去时就变，而不用点了！</span>
</div>
</div>
<script>
init('nav2','con2',"div2_");
</script>

<div class='tab'>
<ul id='nav3' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
</ul>
<div class='con' id='con3'>
</div>
</div>
<div style="display:none">
<div id="div3_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div3_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<div id="div3_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
</div>
<script>
init('nav3','con3',"div3_");
</script>

<div class='tab'>
<ul id='nav4' class='menu'>
<li id="l1" class='default'>第一新闻</li>
<li id="l2" class='default'>第二新闻</li>
<li id="l3" class='default'>第三新闻</li>
<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
</ul>
<div class='con' id='con4'>
</div>
</div>
<div style="display:none">
<div id="div4_l1">
<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
</div>
<div id="div4_l2">
<span>所以特来问一下高手们，请大家帮帮忙！</span>
</div>
<div id="div4_l3">
<span>找了几个来改，都是头部的菜单那里太难定位了</span>
</div>
</div>
<script>
init('nav4','con4',"div4_");
</script>
</body>
</html>
给你个现成的