快捷導(dǎo)航

JS給元素注冊(cè)事件的代碼

更新時(shí)間：2008年10月28日 13:48:22 作者：

麥雞的TAB切換功能代碼

<!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=gb2312" /> <title>麥雞的TAB</title> <style> body{margin:40px; font-size:12px;} p{font-size:200%} .macji-tab a{color:#777; text-decoration:none;} .macji-tab ul.macji-nav{ position:relative; height:24px; margin:0 0 -1px; padding:0; list-style:none; overflow:hidden; } .macji-tab ul.macji-nav li a,.macji-tab ul.macji-nav li a span{ background:url(http://img.jb51.net/images/mj_bg.gif) no-repeat; } .macji-tab ul.macji-nav li{ float:left; margin-right:2px; } .macji-tab ul.macji-nav li a{ float:left; height:24px; padding:0 0 0 15px; line-height:24px; background-position:0 100%; } .macji-tab ul.macji-nav li a span{ display:block; padding:0 15px 0 0; background-position:100% 100%; } .macji-tab ul.macji-nav li a.current{ background-position:0 0; } .macji-tab ul.macji-nav li a.current span{ color:#000; background-position:100% 0; } .macji-tab div.macji-tab-container{ border:solid 1px #ccc; overflow:hidden; } .macji-tab div.macji-tab-container span{ display:none; } .macji-tab .macji-frame{ width:715px; height:47px; padding:8px; border:medium none; } </style> </head> <body> <h1>麥雞的TAB，仿淘寶便民中心</h1> <div   id="vvxyksv9kd"   class="macji-tab"> <ul class="macji-nav"> <li><a href="http://auction1.taobao.com/auction/expressway/game_card.htm?css=frontpage"><span>游戲快充 </span></a></li> <li><a href="http://auction1.taobao.com/auction/expressway/mobile_card.htm?css=frontpage"><span>手機(jī)充值 </span></a></li> <li><a href="http://www.taobao.com/expressway/et-auto.php"><span>機(jī)票</span></a></li> <li><a href="http://www.dbjr.com.cn"><span>腳本之家</span></a></li> </ul> <div   id="vvxyksv9kd"   class="macji-tab-container"> <iframe name="macji-frame" src="http://auction1.taobao.com/auction/expressway/game_card.htm?css=frontpage" class="macji -frame" frameborder="0" scrolling="no"></iframe> </div> <div   id="vvxyksv9kd"   class="macji-tab-container"><span>這里是用來(lái)顯手機(jī)充值的</span></div> <div   id="vvxyksv9kd"   class="macji-tab-container"><span>這里是用來(lái)顯示機(jī)票的</span></div> <div   id="vvxyksv9kd"   class="macji-tab-container"><span>這里是用來(lái)顯示麥雞的博客</span></div> </div> <p><a href="http://www.dbjr.com.cn" title="腳本之家">腳本之家&raquo;</a></p>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

js 獲取計(jì)算后的樣式寫(xiě)法及注意事項(xiàng)
復(fù)合樣式：currentStyle;注意在獲取復(fù)合樣式時(shí)要單獨(dú)寫(xiě),不能寫(xiě)background,接下來(lái)將詳細(xì)介紹下實(shí)現(xiàn)方法，感興趣的你可不要錯(cuò)過(guò)了哈
2013-02-02
理解javascript中的閉包
本文主要介紹了javascript中閉包的特性、作用、示例代碼以及注意事項(xiàng)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
用innerhtml提高頁(yè)面打開(kāi)速度的方法
這篇文章介紹了用innerhtml提高頁(yè)面打開(kāi)速度的方法，有需要的朋友可以參考一下
2013-08-08
javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解
這篇文章主要介紹了javascript如何使用函數(shù)random來(lái)實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名方法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
JavaScript通過(guò)join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過(guò)join函數(shù)連接數(shù)組里所有元素的方法,實(shí)例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
echarts圖形x、y坐標(biāo)文字設(shè)置間隔顯示及相關(guān)問(wèn)題詳解
最近在做一個(gè)web的數(shù)據(jù)統(tǒng)計(jì)部分用到了Echart,下面這篇文章主要給大家介紹了關(guān)于echarts圖形x、y坐標(biāo)文字設(shè)置間隔顯示及相關(guān)問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
javascript實(shí)現(xiàn)消滅星星小游戲簡(jiǎn)單版
消滅星星是一款經(jīng)典的益智手游,單位里看到同事天天在手機(jī)上玩的游戲，現(xiàn)在也有web版了,出于業(yè)余愛(ài)好，自己嘗試用javascript實(shí)現(xiàn)了下，就是略簡(jiǎn)單了點(diǎn)，文中給出了完整的實(shí)例代碼，大家可以自行完善??！下面來(lái)一起看看吧。
2016-11-11
JavaScript中prompt()函數(shù)的用法實(shí)戰(zhàn)例子
JavaScript中的prompt是一個(gè)函數(shù),用于在瀏覽器中顯示一個(gè)對(duì)話(huà)框,提示用戶(hù)輸入一些信息,這篇文章主要給大家介紹了關(guān)于JavaScript中prompt()函數(shù)的用法實(shí)戰(zhàn),需要的朋友可以參考下
2023-11-11
小程序視頻列表中視頻的播放與停止的示例代碼
本篇文章主要介紹了小程序視頻列表中視頻的播放與停止的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Bootstrap模態(tài)框（Modal）實(shí)現(xiàn)過(guò)渡效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框（Modal）實(shí)現(xiàn)過(guò)渡效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03