上一篇
下一篇
网易 雅虎 选项卡,幻灯片,自动提示,拖动,对话框演示
作者:cmscn 日期:2007-10-07
163
<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>163 Tab</title>
<style type="text/css">
<!--
/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
/* 2列 */
.divArea{margin:0 auto; width:750px;background:url("images/bg.gif");}
.divArea .Col1{float:left; width:436px;}
.divArea .Col2{float:right; width:300px;}
/* 左边选项卡 */
.naTab{clear:both;border-bottom:1px #CCCCCC solid;}
.naTab .TabTitle{ height:22px; clear:both;overflow:hidden;}
.naTab .TabTitle ul{margin:0; padding:0;}
.naTab .TabTitle li{ list-style-type:none; padding:6px 0 2px;cursor:pointer;}
.naTab .TabTitle .active{ float:left;width:146px;background:url("images/bg5_6_1.gif");}
.naTab .TabTitle .normal{ float:left;width:145px;background:url("images/bg5_6_2.gif");}
.naTab .TabContent {padding:10px;}
/* 右边选项卡 */
.n4Tab{clear:both;border-bottom:1px #CCCCCC solid;}
.n4Tab .TabTitle{}
.n4Tab .TabTitle ul{margin:0; padding:0;}
.n4Tab .TabTitle li{float:left; width:60px; height:26px; list-style-type:none;cursor:pointer;}
.n4Tab .TabTitle li h6{font-size:12px; font-weight:normal; padding:8px 0 0;margin:0;}
.n4Tab .TabTitle .normal{background:url("images/admenu_bg2.gif");}
.n4Tab .TabTitle .active{background:url("images/admenu_bg1.gif");}
.n4Tab .TabContent {padding:10px;}
.none {display:none;}
-->
</style>
<script type="text/javascript">
function nTabs(tabObj,obj){
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (tabList[i].id == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
document.getElementById(tabObj+"_Title"+i).className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
</head>
<body>
<br />
<!-- 内容开始 -->
<div class="divArea">
<!-- left -->
<div class="Col1">
<!-- 娱乐开始 -->
<div class="naTab" id="naTab" style="height:177px;">
<div class="TabTitle">
<ul>
<li id="naTab_Title0" onclick="nTabs('naTab',this);" class="active"><a href="javascript:void(0);">娱乐</a></li>
<li id="naTab_Title1" onclick="nTabs('naTab',this);" class="normal"><a href="javascript:void(0);">女人</a></li>
<li id="naTab_Title2" onclick="nTabs('naTab',this);" class="normal"><a href="javascript:void(0);">汽车</a></li>
</ul>
</div>
<div class="TabContent">
<div id="naTab_Content0"> gg </div>
<div id="naTab_Content1" class="none">ddddddd gg </div>
<div id="naTab_Content2" class="none">rfffffffff</div>
</div>
<!-- 娱乐结束 -->
</div>
</div>
<!-- right -->
<div class="Col2">
<!-- 分类信息开始 -->
<div class="n4Tab" id="n4Tab" style="height:177px;">
<div class="TabTitle">
<ul>
<li id="n4Tab_Title0" onmouseover="nTabs('n4Tab',this);" class="active"><h6><a href="javascript:void(0);">资讯</a></h6></li>
<li id="n4Tab_Title1" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">教育</a></h6></li>
<li id="n4Tab_Title2" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">房产</a></h6></li>
<li id="n4Tab_Title3" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">招商</a></h6></li>
<li id="n4Tab_Title4" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">拍卖</a></h6></li>
</ul>
</div>
<div class="TabContent">
<div id="n4Tab_Content0"> ah </div>
<div id="n4Tab_Content1" class="none"> sh </div>
<div id="n4Tab_Content2" class="none"> dh </div>
<div id="n4Tab_Content3" class="none"> vh </div>
<div id="n4Tab_Content4" class="none"> nh </div>
</div>
</div>
<!-- 分类信息结束 -->
</div>
</div>
<!-- 内容结束 -->
</body>
</html>
金融界
<!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"> kk </div>
<div id="myTab_Content1" class="hiddenblock"> kk </div>
<div id="myTab_Content2" class="hiddenblock"> kk </div>
</div>
<!-- 选项卡结束 -->
</div>
</div>
</body>
</html>
<!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>y</title>
<style type="text/css">
body {
margin: 0;
text-align: center;
font-size: 12px;
}
.papanel, .pabd, .paft, .patop {width: 348px;}
.papanel {
background: #a5d0fd url("images/pabg.gif") repeat-x;
border-left: 1px solid #7bbdff;
border-right: 1px solid #7bbdff;
font-family: arial;
}
.pabd {
clear: both;
overflow: hidden;
padding-bottom: .35em;
background: url("images/patbg.gif") no-repeat top left;
}
.patop{
height: 25px;
line-height: 20px;
overflow: hidden;
}
/*顶部圆角开始*/
.pabdt {
background: url("images/pabdr.gif") 0 0 no-repeat;
width: 350px;
height: 4px;
overflow: hidden;
}
.pabdb {
background: url("images/pabdr.gif") 0 -4px no-repeat;
width: 350px;
height: 3px;
overflow: hidden;
}
/*顶部圆角结束*/
.tabWin {
width: 340px;
margin: 0 auto;
}
.tabWin .TabTitle {
margin: .25em 0 0 0;
padding: 0;
list-style: none;
height: 40px;
}
.tabWin .TabTitle li {
float: left;
position: relative;
width: 112px;
height: 40px;
line-height: 40px;
text-align: center;
}
.tabWin .TabTitle li a {
display: block;
width: 109px;
height: 40px;
}
/*内置背景开始*/
.tabWin .TabContent {
position: relative;
clear: both;
width: 338px;
margin: 0 auto;
background: #fff;
border-left: 1px solid #85c3ff;
border-right: 1px solid #5ca3e9;
display: block;
}
/*外部小图标开始*/
.tabWin .icomailn {
background: url("images/tabicmln.gif") 0 0 no-repeat;
}
.tabWin .icomail {
background: url("images/tabicml.gif") 0 0 no-repeat;
}
.tabWin .icoalb {
background: url("images/tabicalb.gif") 0 0 no-repeat;
}
.tabWin .icomus {
background: url("images/tabicmus.gif") 0 0 no-repeat;
}
.tabWin .icofin {
background: url("images/tabicfin.gif") 0 0 no-repeat;
}
.tabWin .icoalqq {
background: url("images/tabicfin.gif") 0 0 no-repeat;
}
/*正常*/
.tabWin .tabWinNormal{
background: url("images/patabs1.gif") no-repeat;
}
/*1*/
.tabWin .tabWinAtive1 {
background: url("images/patabsa.gif") no-repeat;
}
/*2*/
.tabWin .tabWinAtive2 {
background: url("images/patabsb.gif") no-repeat;
}
/*3*/
.tabWin .tabWinAtive3 {
background: url("images/patabsc.gif") no-repeat;
}
#patabs1 strong, #patabs2 strong{
color: #0062c5;
font-size: 13px;
margin-left: 2em;
}
.tabWin .none {
height:150px;
text-align:center;
display:none;
filter:revealtrans(transition=22,duration=0.5) blendtrans(duration=0.5) alpha(opacity=97) progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#EBF0F4);
}
</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 n,itemNum;
for(var i=1;i<tabWinTotal+1;i++)
{
if (tabWinObj+"_Title"+i == obj.id)
{
itemNum = i;
//document.getElementById(tabWinObj+"_Content"+i).className = "block";
TransitionEffect(tabWinObj+"_Content"+i,'x',1);
}else{
//document.getElementById(tabWinObj+"_Content"+i).className = "none";
TransitionEffect(tabWinObj+"_Content"+i,'x',0);
}
}
var tabPatabs1 = document.getElementById("patabs1");
var tabPatabs2 = document.getElementById("patabs2");
if(tabPatabs1!=null && tabPatabs2!=null)
{
if (itemNum >= 4){n = itemNum - 3;}else{n = itemNum};
if(itemNum < 4)
{
tabPatabs1.className = "TabTitle tabWinAtive"+n;
tabPatabs2.className = "TabTitle tabWinNormal";
}else{
tabPatabs1.className = "TabTitle tabWinNormal";
tabPatabs2.className = "TabTitle tabWinAtive"+n;
}
}
}
function tabMouseOut(){
window.clearTimeout(waitInterval);
}
/*过渡效果*/
function TransitionEffect(DivID,Cur,DoType)
{
var display = (DoType == 1)?"block":"none";
if (($(DivID) != null)){if (Cur != 'x'){$(DivID).filters.revealTrans.Transition = Cur;$(DivID).filters.revealTrans.apply();$(DivID).style.display = display; $(DivID).filters.revealTrans.play();}else{$(DivID).filters.blendTrans.apply();$(DivID).style.display = display; $(DivID).filters.blendTrans.play();};};
}
function $(){var elements = new Array();for (var i = 0; i < arguments.length; i++) {var element = arguments[i];if (typeof element == 'string'){if(document.getElementById(element)){element = document.getElementById(element);}else{element = document.getElementsByName(element);}if (arguments.length == 1){return element;}}elements.push(element);}return elements;};
</script>
</head>
<body>
<div class="pabdt"> </div>
<div class="papanel">
<div class="pabd">
<div class="patop"> <strong>乐为</strong> </div>
<!-- 选项卡开始 -->
<div class="tabWin">
<ul class="TabTitle tabWinNormal" id="patabs1">
<li id="tabWin_Title1" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icomus"> <strong>电影</strong></a></li>
<li id="tabWin_Title2" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icoalb"> <strong>电视剧</strong></a></li>
<li id="tabWin_Title3" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icomail"> <strong>体育节目</strong></a></li>
</ul>
<div class="TabContent">
<div id="tabWin_Content1" class="none"> 111 </div>
<div id="tabWin_Content2" class="none"> 222 </div>
<div id="tabWin_Content3" class="none"> 333 </div>
</div>
</div>
<!-- 选项卡结束 -->
<!-- 选项卡开始 -->
<div class="tabWin">
<ul class="TabTitle tabWinNormal" id="patabs2">
<li id="tabWin_Title4" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icoalqq"> <strong>网络游戏</strong></a></li>
<li id="tabWin_Title5" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icofin"> <strong>单机游戏</strong></a></li>
<li id="tabWin_Title6" onmouseover="tabWinMouseOver('tabWin',6,this);" onmouseout="tabMouseOut();"><a href="javascript:void(0);" class="icomailn"> <strong>手机游戏</strong></a></li>
</ul>
<div class="TabContent">
<div id="tabWin_Content4" class="none"> ddesse </div>
<div id="tabWin_Content5" class="none"> 555 </div>
<div id="tabWin_Content6" class="none"> 666 </div>
</div>
</div>
<!-- 选项卡结束 -->
</div>
</div>
<div class="pabdb"> </div>
</body>
</html>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 920
发表评论
