当前位置：特效代码站 > 菜单导航 > 正文

一款非常漂亮的标签切换似菜单导航特效

来源：www.qpsh.com作者：佚名时间：08-02-13 点击：

一款非常漂亮的标签切换似菜单导航特效 更多特效代码请访问特效代码站 www.texiao.org.cn
<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(/UploadFile/200802/13/DB152745349.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(/UploadFile/200802/13/3A152746293.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.texiao.org.cn

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 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.texiao.org.cn">特效代码站</a></li>
</ul>

<div id="tcontent1" class="tabcontent">
<a target="_blank" href="http://www.texiao.org.cn/">
<img border="0" src="/UploadFile/200802/13/FD152746643.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.texiao.org.cn/">
<img border="0" src="/UploadFile/200802/13/EC152746274.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.texiao.org.cn/">
<img border="0" src="/UploadFile/200802/13/D7152746726.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.texiao.org.cn/">
<img border="0" src="/UploadFile/200802/13/64152747680.jpg" width="200" height="181" align="left" hspace="5"></a><p>   
<b>如何使用网页特效？<br>
</b><br>
    
一般在你想添加特效的地方直接粘贴特效代码即可，有些特殊的代码还需要在别的地方添加其他代码。在本站下载的特效代码，都有详细说明，按说明使用即可。</div>

</div>

当前位置：特效代码站 > 菜单导航 > 正文

一款非常漂亮的标签切换似菜单导航特效

本类最新

本类热门

相关代码

经典推荐

热门关注