js生成选项卡效果JavaScript生成选项卡效果全动态生成选项卡ie、火狐全兼容资源-CSDN下载

共21个文件

htm：9个

gif：9个

css：1个

js生成选项卡效果

JavaScript生成选项卡效果

动态选项卡

动态生成选项卡

ie生成选项卡

4星 · 超过85%的资源需积分: 9 86 浏览量 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

<!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)

评论收藏

内容反馈