作者：Realazy 时间： 2007-04-10 文档类型：转载 来自：Realazy
第 1 页 标准的 语义的 非侵入的页签切换 [1] 第 2 页 标准的 语义的 非侵入的页签切换 [2] 第 3 页 标准的 语义的 非侵入的页签切换 [3]
用法
您可以为window.onload添加如下函数：
s2uTab(页签, 事件类型, 初始页签);
其中，页签指dl元素的引用，如果您传入的是字符串，则返回id是改字符串的dl引用；事件类型是指，页签的激活是点击还是鼠标悬停，传入click或者mouseover（注意：没有”on”!）即可；初始页签是指您在初始化页面时需要激活的页签，注意，为符合编程习惯，请从0算起。
例子：
运行代码框<!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>标准的、语义的、Unobtrusive的页签切换</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>标准的、语义的、Unobtrusive的页签切换</h1> <h2>例子1：点击激活</h2> <pre><code>s2uTab('tab', 'click', 2);</code></pre> <dl id="tab" class="tab"> <dt>灞上秋居</dt> <dd> <p>灞原风雨定，</p> <p>晚见雁行频。</p> <p>落叶他乡树，</p> <p>寒灯独夜人。</p> <p>空园白露滴，</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>水寒风似刀。</p> <p>平沙日未没，</p> <p>黯黯见临洮。</p> <p>昔日长城战，</p> <p>咸言意气高。</p> <p>黄尘足今古，</p> <p>白骨乱蓬蒿。</p> </dd> </dl> <h2>例子2：鼠标悬停激活</h2> <pre><code>s2uTab('tab', 'mouseover', 0);</code></pre> <dl id="tab2" class="tab"> <dt>灞上秋居</dt> <dd> <p>灞原风雨定，</p> <p>晚见雁行频。</p> <p>落叶他乡树，</p> <p>寒灯独夜人。</p> <p>空园白露滴，</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>水寒风似刀。</p> <p>平沙日未没，</p> <p>黯黯见临洮。</p> <p>昔日长城战，</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 href="http://realazy.org/blog">Realazy</a></p> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
出处：Realazy 责任编辑：moby
上一页 标准的 语义的 非侵入的页签切换 [2] 下一页
◎进入论坛网页制作、网站综合版块参加讨论
蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。
第 1 页 
第 3 页 标准的 语义的 非侵入的页签切换 [3]
