<!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">
/* CSS Document */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
/* 字体属性 [定义规则，小写f加属性名称] */
.fB {font-weight: bold;}
.fI {font-style: italic;}
/* 字体大小*/
.f12px{ font-size:12px;}
.f14px{ font-size:14px;}
/* 其他属性 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; height:0; visibility: hidden; }
.hidden {display: none;}
.unLine ,.unLine a{text-decoration: none;}
.noBorder{border:none; }
.area { margin:0 auto; width:750px;}
.area .col1 {float:left; width:436px; border:1px #ace solid;}
.area .col2 {float:left; width:436px;}
.area .col3 {float:left; width:438px;}
.blankW6{ height:6px; overflow:hidden;background:#fff; clear:both;overflow:hidden;}
.adMenu {height:26px; font-size:14px; background:#EAF8FD; border-bottom:1px #ace solid;}
.adMenu ul {}
.adMenu li {float:left; list-style-type:none; line-height:26px; width:80px; border-right:1px #ace solid; cursor:pointer;}
.adMenu li.active { float:left; background-color:#FFFFFF; border-bottom:1px #ffffff solid;}
.adMenu li.normal {}
.adMenu1 {height:26px; font-size:14px; background:#EAF8FD; border-bottom:1px #ace solid;}
.adMenu1 ul {}
.adMenu1 li {float:left; list-style-type:none; line-height:26px; height:27px; margin:0 0 0 10px; width:80px; border-left:1px #ace solid; border-right:1px #ace solid;}
.adMenu1 li.active{ background:#ffffff;}
.adMenu2 {height:27px; font-size:14px; background:url(th_bg.png) #EAF8FD; margin-top:-1px}
.adMenu2 ul {}
.adMenu2 li {float:left; list-style-type:none; line-height:26px; width:80px; border-right:1px #ace solid;}
.adMenu2 li.active { float:left; background-color:#FFFFFF; margin-top:1px;}
.adMenu2 li.normal {}
.bd {border:1px #ace solid;}
.adMenuC {float:right; font-size:14px;}
.adMenuC ul {}
.adMenuC li { width:80px; list-style-type:none; line-height:30px; margin:0 0 8px 0; background:#EAF8FD; border-top:1px #ace solid; border-bottom:1px #ace solid; border-left:1px #ace solid; margin-right:-1px; float:right;}
.adMenuC li.active {background:#ffffff; width:100px;}
.adMenuC1 {float:left; font-size:14px;}
.adMenuC1 ul {}
.adMenuC1 li { width:80px; list-style-type:none; line-height:30px; margin:0 0 8px 0; background:#EAF8FD; border-top:1px #ace solid; border-bottom:1px #ace solid; margin-left:-1px; border-right:1px #ace solid; float:left;}
.adMenuC1 li.active {background:#ffffff; width:100px;}
.adMenuM {border:1px #ace solid; width:334px; height:200px;}
.adMenu6 {height:30px; font-size:14px; background:#EAF8FD; border-bottom:1px #ace solid;}
.adMenu6 ul {}
.adMenu6 li { margin:6px 0 0 8px; float:left; list-style-type:none; line-height:23px; width:80px; border-right:1px #ace solid; border-top:1px #ace solid; border-left:1px #ace solid; cursor:pointer;}
.adMenu6 li.active { float:left; background-color:#FFFFFF; border-bottom:1px #ffffff solid;}
.adMenu6 li.normal {}
</style>
</head>
<body>
<script>
function getNames(obj,name,tij)
{
var p = document.getElementById(obj);
var plist = p.getElementsByTagName(tij);
var rlist = new Array();
for(i=0;i<plist.length;i++)
{
if(plist[i].getAttribute("name") == name)
{
rlist[rlist.length] = plist[i];
}
}
return rlist;
}
function fod(obj,name)
{
var p = obj.parentNode.getElementsByTagName("li");
var p1 = getNames(name,"f","div"); // document.getElementById(name).getElementsByTagName("div");
for(i=0;i<p1.length;i++)
{
if(obj==p[i])
{
p[i].className = "active";
p1[i].className = "dis";
}
else
{
p[i].className = "normal";
p1[i].className = "hidden";
}
}
}
</script>
<div class="area">
<div class="blankW6"></div>
<p align="left"><a href="http://www.xjstudent.com" target="_blank">Monfs http://www.xjstudent.com</a></p>
<div class="col1">
<div class="adMenu">
<ul>
<li class="active" onMouseOver="fod(this,'fodc1')">选项卡1</li>
<li class="normal" onMouseOver="fod(this,'fodc1')">选项卡2</li>
<li class="normal" onMouseOver="fod(this,'fodc1')">选项卡3</li>
</ul>
</div>
<div id="fodc1">
<div class="dis" name="f">afsdafds<br /></div>
<div class="hidden" name="f">un1afsdafds<br /></div>
<div class="hidden" name="f">un2afsdafds<br /></div>
</div>
</div>
<div class="blankW6"></div>
<div class="col1">
<div class="adMenu">
<ul>
<li class="normal" onclick="fod(this,'foda1')">选项卡1</li>
<li class="normal" onclick="fod(this,'foda1')">选项卡2</li>
<li class="active" onclick="fod(this,'foda1')">选项卡3</li>
<li class="normal" onclick="fod(this,'foda1')">选项卡4</li>
</ul>
</div>
<div id="foda1">
<div class="hidden" name="f">foda<br /></div>
<div class="hidden" name="f">foda1<br /></div>
<div class="dis" name="f">foda2<br /></div>
<div class="hidden" name="f">foda3<br /></div>
</div>
</div>
<div class="blankW6"></div>
<div class="col1">
<div class="adMenu6">
<ul>
<li class="normal" onMouseOver="fod(this,'foda6')">选项卡1</li>
<li class="active" onMouseOver="fod(this,'foda6')">选项卡2</li>
<li class="normal" onMouseOver="fod(this,'foda6')">选项卡3</li>
<li class="normal" onMouseOver="fod(this,'foda6')">选项卡4</li>
</ul>
</div>
<div id="foda6">
<div class="hidden" name="f">foda<br /></div>
<div class="dis" name="f">foda1<br /></div>
<div class="hidden" name="f">foda2<br /></div>
<div class="hidden" name="f">foda3<br /></div>
</div>
</div>
<div class="blankW6"></div>
<div class="col1">
<div class="adMenu1">
<ul>
<li class="active" onMouseOver="fod(this,'foda2')">选项卡1</li>
<li onMouseOver="fod(this,'foda2')">选项卡2</li>
</ul>
</div>
<div id="foda2">
<div name="f">a<br /></div>
<div class="hidden" name="f">b<br /></div>
</div>
</div>
<div class="blankW6"></div>
<div class="col2 bd">
<div class="adMenu2">
<ul>
<li class="normal" onMouseOver="fod(this,'fodc2')">选项卡1</li>
<li class="active" onMouseOver="fod(this,'fodc2')">选项卡2</li>
<li class="normal" onMouseOver="fod(this,'fodc2')">选项卡3</li>
</ul>
</div>
<div id="fodc2">
<div class="hidden" name="f">afsdafds<br /></div>
<div name="f">un1afsdafds<br /></div>
<div class="hidden" name="f">un2afsdafds<br /></div>
</div>
</div>
<div clas
评论0