快捷導(dǎo)航

JS給元素注冊事件的代碼

更新時(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 ><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>這里是用來顯手機(jī)充值的</span></div> <div   id="vvxyksv9kd"   class="macji-tab-container"><span>這里是用來顯示機(jī)票的</span></div> <div   id="vvxyksv9kd"   class="macji-tab-container"><span>這里是用來顯示麥雞的博客</span></div> </div> <p><a href="http://www.dbjr.com.cn" title="腳本之家">腳本之家&raquo;</a></p>  </body> </html>

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

您可能感興趣的文章:

相關(guān)文章

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