作者：Realazy 時(shí)間： 2007-04-10 文檔類型：轉(zhuǎn)載 來(lái)自：Realazy
第 1 頁(yè) 標(biāo)準(zhǔn)的 語(yǔ)義的 非侵入的頁(yè)簽切換 [1] 第 2 頁(yè) 標(biāo)準(zhǔn)的 語(yǔ)義的 非侵入的頁(yè)簽切換 [2] 第 3 頁(yè) 標(biāo)準(zhǔn)的 語(yǔ)義的 非侵入的頁(yè)簽切換 [3]
用法
您可以為window.onload添加如下函數(shù)：
s2uTab(頁(yè)簽, 事件類型, 初始頁(yè)簽);
其中，頁(yè)簽指dl元素的引用，如果您傳入的是字符串，則返回id是改字符串的dl引用；事件類型是指，頁(yè)簽的激活是點(diǎn)擊還是鼠標(biāo)懸停，傳入click或者mouseover（注意：沒(méi)有”on”!）即可；初始頁(yè)簽是指您在初始化頁(yè)面時(shí)需要激活的頁(yè)簽，注意，為符合編程習(xí)慣，請(qǐng)從0算起。
例子：
運(yùn)行代碼框<!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" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /> <title>標(biāo)準(zhǔn)的、語(yǔ)義的、Unobtrusive的頁(yè)簽切換</title> <link rel="stylesheet" href="/articleimg/2007/04/4630/global.css" type="text/css" media="screen" title="default" /> <link rel="stylesheet" href="/articleimg/2007/04/4630/tab.css" type="text/css" media="screen" title="default" /> <script src="/articleimg/2007/04/4630/s2utab.js" type="text/javascript"></script> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ s2uTab('tab', 'click', 2); s2uTab('tab2', 'mouseover', 0); } // ]]> </script> </head> <body> <h1>標(biāo)準(zhǔn)的、語(yǔ)義的、Unobtrusive的頁(yè)簽切換</h1> <h2>例子1：點(diǎn)擊激活</h2> <pre><code>s2uTab('tab', 'click', 2);</code></pre> <dl id="tab" class="tab"> <dt>灞上秋居</dt> <dd> <p>灞原風(fēng)雨定，</p> <p>晚見(jiàn)雁行頻。</p> <p>落葉他鄉(xiāng)樹(shù)，</p> <p>寒燈獨(dú)夜人。</p> <p>空?qǐng)@白露滴，</p> <p>孤壁野僧鄰。</p> <p>寄臥郊扉久，</p> <p>何年致此身。</p> </dd> <dt>新嫁娘</dt> <dd> <p>三日入廚下，</p> <p>洗手作羹湯。</p> <p>未諳姑食性，</p> <p>先遣小姑嘗。</p> </dd> <dt>塞下曲·其二</dt> <dd> <p>飲馬渡秋水，</p> <p>水寒風(fēng)似刀。</p> <p>平沙日未沒(méi)，</p> <p>黯黯見(jiàn)臨洮。</p> <p>昔日長(zhǎng)城戰(zhàn)，</p> <p>咸言意氣高。</p> <p>黃塵足今古，</p> <p>白骨亂蓬蒿。</p> </dd> </dl> <h2>例子2：鼠標(biāo)懸停激活</h2> <pre><code>s2uTab('tab', 'mouseover', 0);</code></pre> <dl id="tab2" class="tab"> <dt>灞上秋居</dt> <dd> <p>灞原風(fēng)雨定，</p> <p>晚見(jiàn)雁行頻。</p> <p>落葉他鄉(xiāng)樹(shù)，</p> <p>寒燈獨(dú)夜人。</p> <p>空?qǐng)@白露滴，</p> <p>孤壁野僧鄰。</p> <p>寄臥郊扉久，</p> <p>何年致此身。</p> </dd> <dt>新嫁娘</dt> <dd> <p>三日入廚下，</p> <p>洗手作羹湯。</p> <p>未諳姑食性，</p> <p>先遣小姑嘗。</p> </dd> <dt>塞下曲·其二</dt> <dd> <p>飲馬渡秋水，</p> <p>水寒風(fēng)似刀。</p> <p>平沙日未沒(méi)，</p> <p>黯黯見(jiàn)臨洮。</p> <p>昔日長(zhǎng)城戰(zhàn)，</p> <p>咸言意氣高。</p> <p>黃塵足今古，</p> <p>白骨亂蓬蒿。</p> </dd> </dl> <h2>CSS</h2> <pre><code>.tab {position:relative; width:20em;} .tab dt {position:relative; z-index:2; bottom:-1px; float:left; margin:0 4px; padding:0 12px; border:1px solid #ccc; background:#333; color:#fff; cursor:pointer;} .tab .current {border-bottom:1px solid #fff; font-weight:bold; background:#fff; color:#333;} .tab dd {position:absolute; z-index:1; top:1.6em; left:0; width:18em; padding:1em; border:1px solid #ccc; background:#fff;}</code></pre> <p class="copyleft">Copy<strong>left</strong> © 2007 <a >Realazy</a></p> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
出處：Realazy 責(zé)任編輯：moby
上一頁(yè) 標(biāo)準(zhǔn)的 語(yǔ)義的 非侵入的頁(yè)簽切換 [2] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
藍(lán)色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨(dú)家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章，但原作者和來(lái)自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來(lái)自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請(qǐng)不要盜鏈到本站，且不準(zhǔn)打上各自站點(diǎn)的水印，亦不能抹去我站點(diǎn)水印。
特別注意：本站所提供的攝影照片，插畫(huà)，設(shè)計(jì)作品，如需使用，請(qǐng)與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請(qǐng)與我們聯(lián)系，我們將立即刪除修改。
第 1 頁(yè) 
第 3 頁(yè) 標(biāo)準(zhǔn)的 語(yǔ)義的 非侵入的頁(yè)簽切換 [3]
