|
<html>
<head> <style> td{ font-size:14px; color:#333333; line-height:140%} body{ font-size:14px; color:#333333; line-height:140%;} .shadetabs{ padding: 3px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 12px Verdana; list-style-type: none; text-align: center; /*set to left, center, or right to align the menu as desired*/ } .shadetabs li{
display: inline; margin: 0; } .shadetabs li a{
text-decoration: none; padding: 3px 7px; margin-right: 3px; border: 1px solid #778; color: #2d2b2b; background: white url(http://www./icon/shade.gif) top left repeat-x; } .shadetabs li a:visited{
color: #2d2b2b; } .shadetabs li a:hover{
text-decoration: underline; color: #2d2b2b; } .shadetabs li.selected{
position: relative; top: 1px; } .shadetabs li.selected a{ /*selected main tab style */
background-image: url(http://www./icon/shadeactive.gif); border-bottom-color: white; } .shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none; } .tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray; width: 450px; margin-bottom: 1em; padding: 10px; } .tabcontent{
display:none; } @media print {
.tabcontent { display:block!important; } } </style> <script type="text/javascript"> //** by www. var enabletabpersistence=1 //enable tab persistence via session only cookies, so selected tab is remembered?
////NO NEED TO EDIT BELOW////////////////////////
var tabcontentIDs=new Object() function expandcontent(linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents for (var i=0; i<ullist.length; i++){ ullist[i].className="" //deselect all tabs if (typeof tabcontentIDs[ulid][i]!="undefined") //if tab content within this array index exists (exception: More tabs than there are tab contents) document.getElementById(tabcontentIDs[ulid][i]).style.display="none" //hide all tab contents } linkobj.parentNode.className="selected" //highlight currently clicked on tab document.getElementById(linkobj.getAttribute("rel")).style.display="block" //expand corresponding tab content saveselectedtabcontentid(ulid, linkobj.getAttribute("rel")) } function expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber] if (thetab.getAttribute("rel")) expandcontent(thetab) } function savetabcontentids(ulid, relattribute){// save ids of tab content divs
if (typeof tabcontentIDs[ulid]=="undefined") //if this array doesn't exist yet tabcontentIDs[ulid]=new Array() tabcontentIDs[ulid][tabcontentIDs[ulid].length]=relattribute } function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on setCookie(ulid, selectedtabid) } function getullistlinkbyId(ulid, tabcontentid){ //returns a tab link based on the ID of the associated tab content
var ullist=document.getElementById(ulid).getElementsByTagName("li") for (var i=0; i<ullist.length; i++){ if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabcontentid){ return ullist[i].getElementsByTagName("a")[0] break } } } function initializetabcontent(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids if (enabletabpersistence==0 && getCookie(arguments[i])!="") //clean up cookie if persist=off setCookie(arguments[i], "") var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any var ulobj=document.getElementById(arguments[i]) var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL for (var x=0; x<ulist.length; x++){ //loop through each LI element var ulistlink=ulist[x].getElementsByTagName("a")[0] if (ulistlink.getAttribute("rel")){ savetabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs ulistlink.onclick=function(){ expandcontent(this) return false } if (ulist[x].className=="selected" && clickedontab=="") //if a tab is set to be selected by default expandcontent(ulistlink) //auto load currenly selected tab content } } //end inner for loop if (clickedontab!=""){ //if a tab has been previously clicked on per the cookie value var culistlink=getullistlinkbyId(arguments[i], clickedontab) if (typeof culistlink!="undefined") //if match found between tabcontent id and rel attribute value expandcontent(culistlink) //auto load currenly selected tab content else //else if no match found between tabcontent id and rel attribute value (cookie mis-association) expandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead } } //end outer for loop } function getCookie(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return "" } function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/) } </script> </head> <body> <ul id="maintab" class="shadetabs"> <li class="selected"><a href="#" rel="tcontent1">简介</a></li> <li><a href="#" rel="tcontent2">运用</a></li> <li><a href="#" rel="tcontent3">实例</a></li> <li><a href="#" rel="tcontent4">反馈</a></li> <li><a target=_blank href="http://www.">网页特效园地</a></li> </ul> <div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
<a target="_blank" href="http://www./"> <img border="0" src="http://www./icon/otter.jpg" width="200" height="181" align="left" hspace="5"></a><p> <b>什么是网页特效？<br> </b><br> 网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。 </div> <div id="tcontent2" class="tabcontent">
<a target="_blank" href="http://www./"> <img border="0" src="http://www./icon/bird.jpg" width="200" height="181" align="left" hspace="5"></a><p> <b>如何使用网页特效？<br> </b><br> 一般在你想添加特效的地方直接粘贴特效代码即可，有些特殊的代码还需要在别的地方添加其他代码。在本站下载的特效代码，都有详细说明，按说明使用即可。</div> <div id="tcontent3" class="tabcontent">
<a target="_blank" href="http://www./"> <img border="0" src="http://www./icon/dog.jpg" width="200" height="181" align="left" hspace="5"></a><p> <b>什么是网页特效？<br> </b><br> 网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。 </div> <div id="tcontent4" class="tabcontent">
<a target="_blank" href="http://www./"> <img border="0" src="http://www./icon/cat.jpg" width="200" height="181" align="left" hspace="5"></a><p> <b>如何使用网页特效？<br> </b><br> 一般在你想添加特效的地方直接粘贴特效代码即可，有些特殊的代码还需要在别的地方添加其他代码。在本站下载的特效代码，都有详细说明，按说明使用即可。</div> </div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma. initializetabcontent("maintab") </script> </body> </html> 本代码由<a href=http://www.>网页特效网</a>提供 |
|
|
