标准的语义的非侵入的页签切换__div+css

标准的语义的非侵入的页签切换

时间： 2007-09-27 01:15:54　阅读次数：6403

第 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="www.blueidea.com/articleimg/2007/04/4630/global.css" type="text/css" media="screen" title="default" />
<link rel="stylesheet" href="www.blueidea.com/articleimg/2007/04/4630/tab.css" type="text/css" media="screen" title="default" />
<script src="www.blueidea.com/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>
 灞原风雨定，
 晚见雁行频<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 落叶他乡树，
 寒灯独夜人<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 空园白露滴，
 孤壁野僧邻<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>飞飞Asp,技术乐园
 寄卧郊扉久，
 何年致此身<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 </dd>
 <dt>新嫁娘</dt>
 <dd>
 三日入厨下，
 洗手作羹汤<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 未谙姑食性，
 先遣小姑尝<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 </dd>
 <dt>塞下曲·其二</dt>
 <dd>
 饮马渡秋水，
 水寒风似刀<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 平沙日未没，
 黯黯见临洮<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 昔日长城战，
 咸言意气高<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 黄尘足今古，
 白骨乱蓬蒿<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 </dd>
</dl>
<h2>例子2：鼠标悬停激活</h2>
<pre><code>s2uTab('tab', 'mouseover', 0);</code></pre>
<dl id="tab2" class="tab">
 <dt>灞上秋居</dt>
 <dd>
 灞原风雨定，
 晚见雁行频<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 落叶他乡树，
 寒灯独夜人<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 空园白露滴，
 孤壁野僧邻<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 寄卧郊扉久，
 何年致此身<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 </dd>
 <dt>新嫁娘</dt>
 <dd>
 三日入厨下，
 洗手作羹汤<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 未谙姑食性，
 先遣小姑尝<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>飞,飞Asp技术乐园
 </dd>
 <dt>塞下曲·其二</dt>
 <dd>
 饮马渡秋水，
 水寒风似刀<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 平沙日未没，
 黯黯见临洮<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 昔日长城战，
 咸言意气高<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 黄尘足今古，
 白骨乱蓬蒿<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>
 </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>
Copyleft &copy; 2007 <a href="http://realazy.org/blog">Realazy</a>
</body>
</html>

提示：您可以先修改部分代码再运行