国庆回家～～
分析同页面切换js代码
上一篇 /
下一篇 2007-05-16 11:16:38
/ 个人分类：教程
<html>
<head>
<style><!-- 这里样式定义 -->
* {font-size:12px;line-height:150%}
.Tab_Active {background:#036;color:#FFF;cursor:pointer;}
.Tab_Normal {background:#FFF;color:#000;cursor:pointer;}
</style>
<scrīpt type="text/javascrīpt">
<!--
function SwitchTabStyle(){
for (var i=0;i<arguments.length;i++){
var p_Node = document.getElementById(arguments[i]);
for(var j=0;j<p_Node.childNodes.length-1;j++){
var theNode = p_Node.childNodes[j];
if(theNode.tagName == undefined || (j==p_Node.childNodes.length-2 && !(window.ActiveXObject ? true : false))) continue;
theNode.onmouseover=function(aEvent){
var myEvent = window.event ? window.event.srcElement : aEvent.target;
var idx_curNode=0;
var p_Node = this.parentNode;
for(var m=0;m<p_Node.childNodes.length-1;m++){
if(p_Node.childNodes[m]!=myEvent){
p_Node.childNodes[m].className='Tab_Normal';
}else{
p_Node.childNodes[m].className='Tab_Active';
idx_curNode=m;
}
}
if(p_Node.childNodes[m].tagName==undefined) {m -=1;} //修正firefox等
var tabNode = p_Node.childNodes[m].childNodes;
for(var n=0;n<tabNode.length;n++){
if(tabNode[n].tagName==undefined) continue; //修正firefox等
if(n!=tabNode.length-idx_curNode-1){
tabNode[n].style.display='none';
}else{
tabNode[n].style.display='block';
}
}
}
theNode.onmouseout=function(aEvent){return false;}
theNode.onclick=function(aEvent){
var myEvent = window.event ? window.event.srcElement : aEvent.target;
window.location=myEvent.getAttribute("datasrc");
}
}
}
}
-->
</scrīpt>
</head>
<body>
<div style="text-align:center;">
<div style="width:773px;border:1px solid #03F;margin:auto;" id='one'>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab1.html">tab 1</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab2.html">tab 2</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab3.html">tab 3</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab4.html">tab 4</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab5.html">tab 5</div>
<div style="clear:both;width:773px;border-top:1px solid #036;">
<div style="height:120px;display:none;">这里放内容啦_5</div>
<div style="height:120px;display:none;">这里放内容啦_4</div>
<div style="height:120px;display:none;">这里放内容啦_3</div>
<div style="height:120px;display:none;">这里放内容啦_2</div>
<div style="height:120px;display:;">这里放内容啦_1</div>
</div>
</div>
<div style="width:773px;border:1px solid #03F;margin:auto;" id='222'>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab11.html">tab 6</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab12.html">tab 5</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab13.html">tab 4</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab14.html">tab 3</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab15.html">tab 2</div>
<div style="float:right;width:80px;border-left:1px solid #036;" datasrc="tab16.html">tab 1</div>
<div style="clear:both;width:773px;border-top:1px solid #036;">
<div style="height:120px;display:;">这里放内容啦_1</div>
<div style="height:120px;display:none;">这里放内容啦_2</div>
<div style="height:120px;display:none;">这里放内容啦_3</div>
<div style="height:120px;display:none;">这里放内容啦_43</div>
<div style="height:120px;display:none;">这里放内容啦_5</div>
<div style="height:120px;display:none;">这里放内容啦_6</div>
</div>
</div>
</div>
<scrīpt type="text/javascrīpt">
SwitchTabStyle('222','one');
</scrīpt>
</body>
</html>
导入论坛
收藏
分享给好友
推荐到圈子
管理
举报
TAG:
教程
