快捷導(dǎo)航

簡單通用的JS滑動(dòng)門代碼

更新時(shí)間：2008年12月19日 13:27:32 作者：

網(wǎng)上的太復(fù)雜，這樣的代碼比較簡單

<UL id=tabMainNav> 
<LI class=selected id=tab_GameinfoNav onmousemove="show_tab(0)"><SPAN><A id=tab_1 href="#">{$PHPCMS[sitename]}</A></SPAN></LI> 
<LI id=tab_ShareEmailNav onmousemove="show_tab(1)"><SPAN><A id=tab_2 href="#">由 Email 分享</A></SPAN> </LI> 
<LI id=tab_ShareIMNav onmousemove="show_tab(2)"><SPAN><A id=tab_3 href="#">由 IM 分享</A></SPAN> </LI> 
<LI id=tab_BlogNav onmousemove="show_tab(3)"><SPAN><A id=tab_4 href="#">發(fā)布到博客/網(wǎng)站</A></SPAN> </LI> 
</UL> 
<UL ID=''tabContent''> 
<LI></LI> 
<LI></LI> 
<LI></LI> 
<LI></LI> 
</UL>

JS代碼

復(fù)制代碼代碼如下:

<script language="javascript"> 
function show_tab(id){ 
var tabMainNav; 
var tabContent; 
tabMainNav=document.getElementById('tabMainNav'); 
tabContent=document.getElementById('tabContent'); 
for(i=0;i<tabMainNav.children.length;i++){ 
if(i==id){ 
tabMainNav.children[i].className='selected'; 
tabContent.children[i].className=''; 
}else{ 
tabMainNav.children[i].className=''; 
tabContent.children[i].className='hidden'; 
} 
} 
} 
</script> 

CSS代碼,對這兩個(gè)CSS修改一下就可以顯示不同的樣式了
.hidden{
}
.selected{
}

您可能感興趣的文章:

相關(guān)文章

yahoo首頁伸縮效果代碼
js伸縮效果代碼
2008-05-05
麥雞的TAB切換功能結(jié)合了javascript和css
麥雞的TAB切換功能結(jié)合了javascript和css...
2007-12-12
javascript 三級下拉選擇菜單Levels對象
javascript 三級下拉選擇菜單Levels對象，非常的不錯(cuò)，大家可以參考下。
2009-07-07
簡單通用的JS滑動(dòng)門代碼
網(wǎng)上的太復(fù)雜，這樣的代碼比較簡單
2008-12-12
CSS鼠標(biāo)懸停菜單圖片交換技術(shù)實(shí)現(xiàn)
這是一個(gè)使用了圖片交換技術(shù)制作的CSS鼠標(biāo)懸停菜單，也就是大家所說的鼠標(biāo)經(jīng)過換色，不過本例中的菜單并沒有使用純CSS來實(shí)現(xiàn)背景換色，這里將用一幅圖片替換了背景色，因?yàn)橹饕窍胱尨蠹伊私釩SS對背景圖片控制的技巧
2009-11-11
用js實(shí)現(xiàn)的比較經(jīng)典實(shí)用的觸發(fā)型導(dǎo)航菜單
用js實(shí)現(xiàn)的比較經(jīng)典實(shí)用的觸發(fā)型導(dǎo)航菜單...
2007-03-03
鼠標(biāo)滑過放大顯示效果的列表
非常不錯(cuò)的當(dāng)鼠標(biāo)放上去以后，類別將會(huì)出現(xiàn)放大的一些文字和圖片，適合一些tips消息框效果
2008-12-12
提取自百度有啊的css圓角效果
css圓角效果大家注意下圖片，其實(shí)就是利用圖片+css實(shí)現(xiàn)
2009-03-03
javascript實(shí)現(xiàn)的又一個(gè)不錯(cuò)的滑動(dòng)導(dǎo)航效果
javascript實(shí)現(xiàn)的又一個(gè)不錯(cuò)的滑動(dòng)導(dǎo)航效果...
2007-04-04
JavaScript多級下拉菜單代碼(簡單實(shí)用)
JavaScript下拉菜單實(shí)現(xiàn)代碼，js與css的良好結(jié)合。喜歡的朋友可以測試下。
2010-06-06