用法
您可以为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 全部选择]
