<!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=gbk" />
<title>动态生成选项卡（可以动态增加删除，兼容IE，火狐。可自适应位置，当超过宽度可以用按钮左右调整位置。）</title>
<link rel="start" href="http://www.14px.com" title="Home" />
<link rel="stylesheet" rev="stylesheet" href="showmapuser/citymap/lyimages/style2.css" type="text/css" media="all" />
<style type="text/css">
.notered{color: red;}
</style>
</head>
<body>
<div class="side" id="main_info">
<div class="left-nav">
<ul>
<li class="a"><a id='aTabjd' href="#" onclick="city2_tab.createTab('jd','景点','menu2.htm');return false;">景点</a></li>
<li class="b"><a id='aTabms' href="#" onclick="city2_tab.createTab('meishi','美食','menu3.htm');return false;">美食</a></li>
<li class="c"><a id='aTabgb' href="#" onclick="city2_tab.createTab('binguan','宾馆','menu4.htm');return false;">宾馆</a></li>
<li class="d"><a href="#" onclick="city2_tab.createTab('quanjing','全景','menu5.htm');return false;">全景</a></li>
<li class="e"><a id='aTabfw' href="#" onclick="city2_tab.createTab('fuwu','服务','menu6.htm');return false;">服务</a></li>
<li class="f"><a href="#" onclick="city2_tab.createTab('njl','农家乐','menu7.htm');return false;">农家乐</a></li>
<li class="g"><a href="#" onclick="city2_tab.createTab('tc','特产','menu8.htm');return false;">特产</a></li>
</ul>
</div>
<div class="info">
<div id="tabdiv" class="top-table" style="overflow: hidden;">
<div id="tabul">
</div>
</div>
<div id="tabmovbt" style="float: left;">
<table>
<tr>
<td>
<div id="leftbt" onMouseDown="city2_tab.movTab(-3)" onmouseup="city2_tab.movTab(0)"><img src='showmapuser/citymap/lyimages/l.gif'></div>
</td>
<td>
<div id="rightbt" onMouseDown="city2_tab.movTab(3)" onmouseup="city2_tab.movTab(0)"><img src='showmapuser/citymap/lyimages/r.gif'></div>
</td>
</tr>
</table>
</div>
<div class="clear"></div>
<div id="tabifr" class="box"></div>
</div>
</div>
</body>
<script type="text/javascript">
var right_height=70;
if(window.XMLHttpRequest){ //Mozilla, Safari, IE7
if(!window.ActiveXObject){ // Mozilla, Safari,
}else{
right_height=137;
}
}else {
}
var city2_tab={
createTab:function(strid,strhtm,src){
var elm = document.getElementById(strid);
var elm2 = document.getElementById("ifr_"+strid);
var elm3 = document.getElementById("tabdiv");
var elm4 = document.getElementById("tabul");
var elm5 = document.getElementById("tabifr");
var elm6 = document.getElementById("close_"+strid);
if(this.ifr)
{
this.ifr.style.display="none";
}
if(this.closediv)
{
this.closediv.style.display="none";
}
if(elm3 && elm4)
{
if(!city2_tab.tabname)
{
city2_tab.tabname=[];
}
if(!city2_tab.num)
{
city2_tab.num=0;
}
if(!elm)
{
if(!this.oswidth)
{
this.oswidth = 0;
}
if(strid=='sy')
{
elm4.innerHTML+="<div id='"+strid+"' class='tab-div' onclick='city2_tab.setTab(this)' onmouseover='city2_tab.downTab(this)' onmouseout='city2_tab.outTab(this)' ><div id='div_"+strid+"' class='tab-span'>"+strhtm+"</div></div>";
}
else
{
elm4.innerHTML+="<div id='"+strid+"' class='tab-div' onclick='city2_tab.setTab(this,\"ifrd_"+strid+".city2_mapFLT\")' onmouseover='city2_tab.downTab(this)' onmouseout='city2_tab.outTab(this)' ><div id='div_"+strid+"' class='tab-span'>"+strhtm+"</div><div id='close_"+strid+"' class='x' onclick='city2_tab.closeTab(\""+strid+"\")' onmouseover='city2_tab.moveCloseTab(\""+strid+"\")' onmouseout='city2_tab.outCloseTab(\""+strid+"\")' ></div></div>";
}
elm = document.getElementById(strid);
document.getElementById("div_"+strid).style.width= parseInt(strhtm.length)*12+"px";
elm.style.width=34+(parseInt(strhtm.length)*12)+"px";
elm2 =document.createElement("div");
elm2.id="ifr_"+strid;
elm2.innerHTML="<iframe id='ifrd_"+strid+"' name='ifrd_"+strid+"' src='"+src+"' frameborder='0' scroll='yes' style='border-style:none;width:100%;*width:350px!important;_width:350px;' height='"+(document.getElementById('main_info').clientHeight-right_height)+"'></iframe>";
elm5.appendChild(elm2);
elm4.style.width = parseInt(city2_tab.oswidth) + (parseInt(elm.offsetWidth))+"px";
city2_tab.oswidth = elm4.style.width;
city2_tab.tabname[city2_tab.num]={elm:elm,width:elm.offsetWidth};
city2_tab.num++;
}
else
{
elm2.style.display="";
elm6.style.display="";
}
this.closediv=document.getElementById("close_"+strid);
this.ifr=elm2;
var width=0;
for(var i=0;i < city2_tab.tabname.length;i++)
{
if(city2_tab.tabname[i])
{
width+=city2_tab.tabname[i].width;
if(elm.id==city2_tab.tabname[i].elm.id)
{
if(width-city2_tab.tabname[i].width <= elm3.scrollLeft)
{
elm3.scrollLeft=width-city2_tab.tabname[i].width;
}
if(width >= Math.floor(elm3.scrollLeft+(parseInt(elm3.offsetWidth))))
{
elm3.scrollLeft += width-Math.floor(elm3.scrollLeft+(parseInt(elm3.offsetWidth)));
}
}
}
}
city2_tab.movTab(0);
}
elm=null;elm2=null;elm3=null;elm4=null;elm5=null;width=null;
},
movTab:function(num)
{
var elm = document.getElementById("tabdiv");
var elm2 = document.getElementById("leftbt");
var elm3 = document.getElementById("rightbt");
if(elm && elm2 && elm3)
{
if(elm.scrollLeft <= 0)
{
//elm2.innerHTML=" ";
}
else if(elm.scrollLeft > 0)
{
elm2.innerHTML="<img src='showmapuser/citymap/lyimages/l.gif'>";
}
if(elm.scrollLeft >= Math.floor(elm.scrollWidth-parseInt(elm.offsetWidth)))
{
//elm3.innerHTML=" ";
}
else if(elm.scrollLeft < Math.floor(elm.scrollWidth-parseInt(elm.offsetWidth)))
{
elm3.innerHTML="<img src='showmapuser/citymap/lyimages/r.gif'>";
}
}
city2_tab.temp=num;
if(city2_tab.temp==0)
{
return;
}
elm.scrollLeft+=city2_tab.temp;
//city2_tab.closediv.style.display="none";
elm=null;elm2=null;elm3=null;elm4=null;
window.setTimeout('city2_tab.movTab(city2_tab.temp)',20);
},
setTab:function (strid,src){
city2_tab.ifr.style.display="none";
if(city2_tab.closediv)
{
city2_tab.closediv.style.display="none";
}
var elm = document.getElementById("ifr_"+strid.id);
var elm2 = document.getElementById("close_"+strid.id);
if(elm){
elm.style.display="";
city2_tab.ifr=elm;
}
if(elm2){
elm2.style.display="";
city2_tab.closediv=elm2;
}
elm=null;
elm2=null;
},
downTab:function (strid)
{
var elm = document.getElementById("close_"+strid.id)
if(city2_tab.closediv && elm && city2_tab.closediv.id !=elm.id)
{
elm.style.display="";
}
elm=null;
},
outTab:function (strid)
{
var elm = document.getElementById("close_"+strid.id)
if(city2_tab.closediv && elm && city2_tab.closediv.id !=elm.id)
{
elm.style.display="none";
}
elm=null;
},
closeTab:function (strid)
js生成选项卡效果 JavaScript生成选项卡效果 全动态生成选项卡 ie、火狐全兼容
4星 · 超过85%的资源 需积分: 9 197 浏览量
2009-07-23
16:31:30
上传
评论 2
收藏 214KB RAR 举报 
.rar （21个子文件） 
全动态选项卡 
menu7.htm 456B menu.htm 9KB showmapuser citymap lyimages 
x.gif 1KB r.gif 343B buttom-bg.gif 13KB l.gif 345B layer-but.gif 1KB banner-bg1.gif 20KB banner-bg.gif 26KB Thumbs.db 104KB
banner-bg.png 137KB hidden-but-bg.gif 91B style2.css 9KB layer-tit-bg.gif 147B menu4.htm 454B menu6.htm 454B menu5.htm 454B menu2.htm 454B menu1.htm 454B menu3.htm 454B menu8.htm 454B
- 1
- 2
- 3
- 4
- 5
- 6
前往页