仿金融界的tab选项卡效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
body {
margin: 6px 0px;
font: 12px 宋体;
text-align: center;
}
/* 2列 */
.divArea3{width:750px;}
.divArea3 .divAreaCol1{float:left; width:371px;}
.divArea3 .divAreaCol2{float:right; width:280px;}
.divArea3Box{
width:100%;
height:120px;
line-height:120px;
padding:2px;
margin-top:2px;
margin-bottom:2px;
border:1px #CCCCCC solid;
text-align:center;
}
a{
color:#999999;
text-decoration:none;
}
/*选项窗*/
.tabWin {
width: 371px;
height: 230px;
}
.tabWin, .crbl {
float: left;
border: 1px solid #CCCCCC;
margin: 0px 3px 0px 3px;
display: inline;
overflow: hidden;
}
.tabWinInnerBox {
width: 361px;
height: 220px;
margin: 5px;
overflow: hidden;
}
.tabWinLine1 {
width: 360px;
height: 29px;
}
.tabWinLine2 {display: block;}
.tabWinLine4 {display: none;}
.tabWinLine2, .tabWinLine4 {
height: 1px;
width: 360px;
}
.tabWinLine2 div, tabWinLine4 div {
float: left;
background-color: #cccccc;
width: 118px;
height: 1px;
}
.tabWinLine1 .sepa, .tabWinLine2 .sepa, .tabWinLine4 .sepa {
width: 3px;
background-image: url("images/0.gif");
}
.tabWinLine2 .tabWinLine3, tabWinLine4 tabWinLine3 {
background-color: #ffffff;
background-repeat: no-repeat;
}
.tabWinLine1 div {
float: left;
height: 26px;
width: 118px;
line-height: 26px;
cursor: pointer;
background-image: url("images/c21_1.gif");
font-weight: bold;
color: #1F3A87;
}
.tabWinLine1 .tabWinTitle {
background-image: url("images/0.gif");
height: 28px;
background-color: White;
width: 116px;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
color: #B10000;
}
.tabWinInnerBox .showblock, .tabWinInnerBox .hiddenblock {
height: 143px;
width: 348px;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
background-color: #ffffff;
text-align: left;
padding: 9px 3px 8px 7px;
margin: 0px 0px 3px 0px;
overflow: hidden;
}
.hiddenblock {display: none;}
.showblock {display: block;}
/*选项卡*/
.divTab2 {
float: left;
width: auto;
height: 232px;
margin: 0px 3px 0px 3px;
display: inline;
overflow: hidden;
}
.divTab2 .TabTitle {
height: 24px;
width: 280px;
font-size: 12px;
}
.divTab2 .normal {
background-image: url("images/mtitle2.gif");
color: #1F3A87;
}
.divTab2 .active {
background-image: url("images/mtitle1.gif");
font-weight: bold;
color: #1F3A87;
}
.divTab2 .TabTitle .sepa {
width: 1px;
background-image: url("images/speabg.gif");
}
.divTab2 .TabTitle .border {
width: 1px;
background-image: url("images/speabg.gif");
}
.divTab2 .TabTitle div {
width: 92px;
height: 21px;
padding-top: 3px;
line-height: 21px;
float: left;
cursor: pointer;
}
.divTab2 .showblock, .divTab2 .hiddenblock {
text-align: left;
padding: 9px 0px 0px 0px;
width: 278px;
height: 198px;
overflow: hidden;
border-left: 1px solid #064CA1;
border-bottom: 1px solid #064CA1;
border-right: 1px solid #064CA1;
}
</style>
<script language="javascript">
var waitInterval;
var mouseDelayTime = 200;
/*选项窗*/
function tabWinMouseOver(tabWinObj,tabWinTotal,obj)
{
window.clearTimeout(waitInterval);
waitInterval=window.setTimeout("ChangeDiv3('"+tabWinObj+"',"+tabWinTotal+","+obj.id+")",mouseDelayTime)
}
function ChangeDiv3(tabWinObj,tabWinTotal,obj)
{
var itemNum;
for(var i=0;i<tabWinTotal;i++)
{
if (tabWinObj+"_Title"+i == obj.id)
{
itemNum = i;
document.getElementById(tabWinObj+"_Title"+i).className = "tabWinTitle";
document.getElementById(tabWinObj+"_Line"+i).className = "tabWinLine3";
document.getElementById(tabWinObj+"_Content"+i).className = "showblock";
}else{
var divID = document.getElementById(tabWinObj+"_Title"+i);
if (divID != null){divID.className = "";}
var ContentDiv = document.getElementById(tabWinObj+"_Content"+i);
if(ContentDiv!=null){ContentDiv.className = "hiddenblock";}
var BDiv = document.getElementById(tabWinObj+"_Line"+i);
if(BDiv!=null){BDiv.className="";}
}
}
var tabWinImg1 = document.getElementById(tabWinObj+"_Img1");
var tabWinImg2 = document.getElementById(tabWinObj+"_Img2");
if(tabWinImg1!=null && tabWinImg2!=null)
{
if(itemNum < 4)
{
tabWinImg1.className = "tabWinLine2";
tabWinImg2.className = "tabWinLine4";
}else{
tabWinImg1.className = "tabWinLine4";
tabWinImg2.className = "tabWinLine2";
}
}
}
/*选项卡*/
function tabMouseOver(tabObj,tabTotal,obj)
{
window.clearTimeout(waitInterval);
waitInterval=window.setTimeout("changeTabDiv('"+tabObj+"',"+tabTotal+","+obj.id+")",mouseDelayTime)
}
function changeTabDiv(tabObj,tabTotal,obj){
for(i=0; i <tabTotal; i++)
{
if (tabObj+"_Title"+i == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "active";
document.getElementById(tabObj+"_Content"+i).className = "showblock";
}else{
document.getElementById(tabObj+"_Title"+i).className = "normal";
document.getElementById(tabObj+"_Content"+i).className = "hiddenblock";
}
}
}
function tabMouseOut(){window.clearTimeout(waitInterval);}
</script>
</head>
<body>
<div class="divArea3">
<div class="divAreaCol1">
<!-- 选项窗开始 -->
<div class="tabWin" id="tabWin">
<div class="tabWinInnerBox">
<div class="tabWinLine1">
<div id="tabWin_Title1" class="tabWinTitle" onMouseOver="tabWinMouseOver('tabWin',7,this);" onMouseOut="tabMouseOut();"><a href="javascript:void(0);" class="a4">热点概念股</a></div>
<div class="sepa"></div>
<div id="tabWin_Title2" onMouseOver="tabWinMouseOver('tabWin',7,this);" onMouseOut="tabMouseOut();"><a href="javascript:void(0);" class="a4">数据分析</a></div>
<div class="sepa"></div>
<div id="tabWin_Title3" onMouseOver="tabWinMouseOver('tabWin',7,this);" onMouseOut="tabMouseOut();"><a href="javascript:void(0);" class="a4">权证市场</a> </div>
</div>
<div class="tabWinLine2" id="tabWin_Img1">
<div id="tabWin_Line1" class="tabWinLine3"><img src="" width="1" height="1" alt="" ></div>
<div class="sepa"><img src="" width="1" height="1" alt="" ></div>
<div id="tabWin_Line2"><img src="" width="1" height="1" alt="" ></div>
<div class="sepa"><img src="" width="1" height="1" alt="" ></div>
<div id="tabWin_Line3"><img src="" width="1" height="1" alt="" ></div>
</div>
<div id="tabWin_Content1" class="showblock"> ff </div>
<div id="tabWin_Content2" class="hiddenblock"> ff </div>
<div id="tabWin_Content3" class="hiddenblock"> ff </div>
<div class="tabWinLine1">
<div id="tabWin_Title4" onMouseOver="tabWinMouseOver('tabWin',7,this);" onMouseOut="tabMouseOut();"><a href="javascript:void(0);" class="a4">研究报告</a></div>
<div class="sepa"></div>
<div id="tabWin_Title5" onMouseOver="tabWinMouseOver('tabWin',7,this);" onMouseOut="tabMouseOut();"><a href="javascript:void(0);" class="a4">名家专栏</a></div>
<div class="sepa"></div>
<div id="tabWin_Title6" onMouseOver="tabWinMouseOver('tabWin',7,this);" onMouseOut="tabMouseOut();"><a href="javascript:void(0);" class="a4">机构观点</a></div>
</div>
<div class="tabWinLine4" id="tabWin_Img2">
<div id="tabWin_Line4"><img src="" width="1" height="1" alt="" ></div>
<div class="sepa"><img src="" width="1" height="1" alt="" ></div>
<div id="tabWin_Line5"><img src="" width="1" height="1" alt="" ></div>
<div class="sepa"><img src="" width="1" height="1" alt="" ></div>
<div id="tabWin_Line6"><img src="" width="1" height="1" alt="" ></div>
</div>
<div id="tabWin_Content4" class="hiddenblock"> ff </div>
<div id="tabWin_Content5" class="hiddenblock"> ff </div>
<div id="tabWin_Content6" class="hiddenblock"> gg </div>
</div>
</div>
<!-- 选项窗结束 -->
</div>
<div class="divAreaCol2">
<!-- 选项卡开始 -->
<div class="divTab2" id="myTab">
<div class="TabTitle">
<div class="border"> </div>
<div id="myTab_Title0" class="active" onMouseOver="tabMouseOver('myTab',3,this);" onMouseOut="tabMouseOut();"> <a href="javascript:void(0);">股市资讯</a></div>
<div class="sepa"> </div>
<div id="myTab_Title1" class="normal" onMouseOver="tabMouseOver('myTab',3,this);" onMouseOut="tabMouseOut();"> <a href="javascript:void(0);">上市公司</a></div>
<div class="sepa"> </div>
<div id="myTab_Title2" class="normal" onMouseOver="tabMouseOver('myTab',3,this);" onMouseOut="tabMouseOut();"> <a href="javascript:void(0);">新股动态</a></div>
<div class="border"> </div>
</div>
<div id="myTab_Content0" class="showblock"> k1 </div>
<div id="myTab_Content1" class="hiddenblock"> k2 </div>
<div id="myTab_Content2" class="hiddenblock"> k3 </div>
</div>
<!-- 选项卡结束 -->
</div>
</div>
</body>
</html>
原文地址：http://www.blogguy.cn/show-271-1.html
- 没有评论
