快捷導(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="wppm3vysvbp"   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://m.fzitv.net"><span>腳本之家</span></a></li> </ul> <div   id="wppm3vysvbp"   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="wppm3vysvbp"   class="macji-tab-container"><span>這里是用來顯手機(jī)充值的</span></div> <div   id="wppm3vysvbp"   class="macji-tab-container"><span>這里是用來顯示機(jī)票的</span></div> <div   id="wppm3vysvbp"   class="macji-tab-container"><span>這里是用來顯示麥雞的博客</span></div> </div> <p><a href="http://m.fzitv.net" title="腳本之家">腳本之家&raquo;</a></p>  </body> </html>

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

您可能感興趣的文章:

相關(guān)文章

js循環(huán)改變div顏色具體方法
本篇文章主要介紹了js循環(huán)改變div顏色具體方法，需要的朋友可以參考一下
2013-06-06
js獲取json中key所對(duì)應(yīng)的value值的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄猨s獲取json中key所對(duì)應(yīng)的value值的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁應(yīng)用小結(jié)
這篇文章主要介紹了BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
javascript實(shí)現(xiàn)youku的視頻代碼自適應(yīng)寬度
這篇文章主要介紹了javascript實(shí)現(xiàn)youku的視頻代碼自適應(yīng)寬度的方法的示例，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-05-05
JavaScript中對(duì)象屬性的添加和刪除示例
用.為對(duì)象添加屬性，用關(guān)鍵字delete刪除屬性，下面為大家介紹下對(duì)象屬性的添加和刪除,需要的朋友可以參考下
2014-05-05
javascript移出節(jié)點(diǎn)removeChild()使用介紹
這篇文章主要介紹了javascript節(jié)點(diǎn)操作移出節(jié)點(diǎn)removeChild()的使用,需要的朋友可以參考下
2014-04-04
javascript導(dǎo)出csv文件（excel）的方法示例
這篇文章主要給大家介紹了關(guān)于javascript導(dǎo)出csv文件（excel）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
webpack將js打包后的map文件詳解
下面小編就為大家分享一篇webpack將js打包后的map文件詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
JS實(shí)現(xiàn)可關(guān)閉的對(duì)聯(lián)廣告效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可關(guān)閉的對(duì)聯(lián)廣告效果代碼,涉及JavaScript針對(duì)滾動(dòng)事件動(dòng)態(tài)設(shè)置頁面元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
SpringMVC restful 注解之@RequestBody進(jìn)行json與object轉(zhuǎn)換
這篇文章主要介紹了SpringMVC restful 注解之@RequestBody進(jìn)行json與object轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
2015-12-12