Description:Usingatabbedinterface,thisDHTMLscriptletsyoudisplayexternalwebpagesinlineonyourpage,withthehelpoftheIFRAMEtag.Wethrewinafeaturethatallowstheusertoalsoloadthewebpageintheentirebrowserwindowwhendesired.ThisscriptworksinIE5+andNS6+,anddegradeswellwiththerest(astabsaresimplyregularlinks).Cool!
Step1:AddthebelowCSSandDHTMLscripttothe<HEAD>sectionofyourpage:
复制代码 代码如下:
<styletype="text/css">
/*EricMeyer'sbasedCSStab*/
#tablist{
padding:3px0;
margin-left:0;
margin-bottom:0;
margin-top:0.1em;
font:bold12pxVerdana;
}
#tablistli{
list-style:none;
display:inline;
margin:0;
}
#tablistlia{
text-decoration:none;
padding:3px0.5em;
margin-left:3px;
border:1pxsolid#778;
border-bottom:none;
background:white;
}
#tablistlia:link,#tablistlia:visited{
color:navy;
}
#tablistlia:hover{
color:#000000;
background:#C1C1FF;
border-color:#227;
}
#tablistlia.current{
background:lightyellow;
}
</style>
<scripttype="text/javascript">
/***********************************************
*TabbedDocumentViewerscript-?DynamicDriveDHTMLcodelibrary(www.dynamicdrive.com)
*ThisnoticeMUSTstayintactforlegaluse
*VisitDynamicDriveathttp://www.dynamicdrive.com/forfullsourcecode
***********************************************/
varselectedtablink=""
vartcischecked=false
functionhandlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol&&document.tabcontrol.tabcheck.checked)?true:false
if(document.getElementById&&!tcischecked){
vartabobj=document.getElementById("tablist")
vartabobjlinks=tabobj.getElementsByTagName("A")
for(i=0;i<tabobjlinks.length;i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
returnfalse
}
else
returntrue
}
functionhandleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if(document.getElementById&&tcischecked){
if(selectedtablink!="")
window.location=selectedtablink
}
}
</script>
Tocustomizethelookofthetabs(ie:color),edittheCSS.Thereisnoneedtomodifythescriptatall.
Step2:Addthebelowcodetothe<BODY>sectionofyourpage:
复制代码 代码如下:
<ulid="tablist">
<li><aclass="current"href="http://www.google.com"onClick="returnhandlelink(this)">Google</a></li>
<li><ahref="http://www.yahoo.com"onClick="returnhandlelink(this)">Yahoo</a></li>
<li><ahref="http://www.msn.com"onClick="returnhandlelink(this)">MSN</a></li>
<li><ahref="http://www.news.com"onClick="returnhandlelink(this)">News.com</a></li>
<li><ahref="http://www.dynamicdrive.com"onClick="returnhandlelink(this)">DynamicDrive</a></li>
</ul>
<iframeid="tabiframe"src="http://www.google.com"width="98%"height="350px"></iframe>
<formname="tabcontrol">
<inputname="tabcheck"type="checkbox"onClick="handleview()">Opentablinksinbrowserwindowinstead.
</form>
TheaboveHTMLcoderendersthetablinksandIFRAMEtagusedtocontaintheexternaldocuments.ChangetheURLstoyourown. Now,ifyouhavelotsoftablinks,youcangetthemtoappearonseparatelines,byaddingadivider: 复制代码 代码如下:
<ulid="tablist">
<li><aclass="current"href="#">Google</a></li>
<li><ahref="#">Yahoo</a></li>
<li><ahref="#">MSN</a></li>
<div></div>
<li><ahref="#">News.com</a></li>
<li><ahref="#">DynamicDrive</a></li>
</ul>