http://wiki.blueidea.com/index.php?action=history&feed=atom&title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1
Tab选项卡 - 版本历史
2026-05-08T05:09:07Z
本wiki的该页面的版本历史
MediaWiki 1.24.1
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=6587&oldid=prev
yoom：增加一个运行实例
2010-02-02T12:19:54Z
<p>增加一个运行实例</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">←上一版本</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">2010-02-02T12:19:54的版本</td>
</tr><tr><td colspan="2" class="diff-lineno">第31行：</td>
<td colspan="2" class="diff-lineno">第31行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的实例 ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的实例 ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;"><del class="diffchange diffchange-inline">注意：以下链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</del></span></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;"><ins class="diffchange diffchange-inline">注意：以下链接，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</ins></span></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">*http://bbs.blueidea.com/thread-2968930-1-1.html 语义化Tab选项卡的一次尝试</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>*http://bbs.blueidea.com/thread-2606562-1-1.html 仿windows选项卡效果拾零</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>*http://bbs.blueidea.com/thread-2606562-1-1.html 仿windows选项卡效果拾零</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>*http://bbs.blueidea.com/thread-2771510-1-1.html CSS网页选项卡（可下载到本地)</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>*http://bbs.blueidea.com/thread-2771510-1-1.html CSS网页选项卡（可下载到本地)</div></td></tr>
<tr><td colspan="2" class="diff-lineno">第39行：</td>
<td colspan="2" class="diff-lineno">第40行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>*http://bbs.blueidea.com/thread-2884588-1-1.html 纯手工写的一个选项卡切换</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>*http://bbs.blueidea.com/thread-2884588-1-1.html 纯手工写的一个选项卡切换</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;"><del class="diffchange diffchange-inline">注意：以上链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</del></span></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;"><ins class="diffchange diffchange-inline">注意：以上链接，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</ins></span></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[Category:CSS]]</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>[[Category:CSS]]</div></td></tr>
</table>
yoom
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=5890&oldid=prev
2009-07-14T08:52:05 yoom
2009-07-14T08:52:05Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">←上一版本</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">2009-07-14T08:52:05的版本</td>
</tr><tr><td colspan="2" class="diff-lineno">第9行：</td>
<td colspan="2" class="diff-lineno">第9行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>正如某些JavaScript程序模仿出了操作系统的拖拽功能，选项卡也被模拟到了web页面中。这不但简化了操作步骤，也更符合人们的使用逻辑。</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>正如某些JavaScript程序模仿出了操作系统的拖拽功能，选项卡也被模拟到了web页面中。这不但简化了操作步骤，也更符合人们的使用逻辑。</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><strong><del class="diffchange diffchange-inline">有一篇更好的译文：*http</del>://ucdchina.com/snap/3999 Tab (选项卡)的产品设计原则及应用</strong></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><strong><ins class="diffchange diffchange-inline">有一篇更好的译文：http</ins>://ucdchina.com/snap/3999 Tab (选项卡)的产品设计原则及应用</strong></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的优点 ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的优点 ==</div></td></tr>
</table>
yoom
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=5889&oldid=prev
yoom：改变一个小结构
2009-07-14T08:51:36Z
<p>改变一个小结构</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">←上一版本</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">2009-07-14T08:51:36的版本</td>
</tr><tr><td colspan="2" class="diff-lineno">第8行：</td>
<td colspan="2" class="diff-lineno">第8行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>正如某些JavaScript程序模仿出了操作系统的拖拽功能，选项卡也被模拟到了web页面中。这不但简化了操作步骤，也更符合人们的使用逻辑。</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>正如某些JavaScript程序模仿出了操作系统的拖拽功能，选项卡也被模拟到了web页面中。这不但简化了操作步骤，也更符合人们的使用逻辑。</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><strong>有一篇更好的译文：*http://ucdchina.com/snap/3999 Tab (选项卡)的产品设计原则及应用</strong></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的优点 ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的优点 ==</div></td></tr>
<tr><td colspan="2" class="diff-lineno">第29行：</td>
<td colspan="2" class="diff-lineno">第31行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的实例 ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的实例 ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">*http://ucdchina.com/snap/3999 <strong>Tab (选项卡)的产品设计原则及应用</strong></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;">注意：以下链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;">注意：以下链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
yoom
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=5888&oldid=prev
yoom：添加一个外链
2009-07-14T08:20:55Z
<p>添加一个外链</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">←上一版本</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">2009-07-14T08:20:55的版本</td>
</tr><tr><td colspan="2" class="diff-lineno">第29行：</td>
<td colspan="2" class="diff-lineno">第29行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的实例 ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Tab选项卡的实例 ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">*http://ucdchina.com/snap/3999 <strong>Tab (选项卡)的产品设计原则及应用</strong></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;">注意：以下链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;">注意：以下链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
yoom
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=5491&oldid=prev
yoom：/*添加分类*/
2009-03-17T03:11:06Z
<p><span dir="auto"><span class="autocomment">添加分类</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">←上一版本</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">2009-03-17T03:11:06的版本</td>
</tr><tr><td colspan="2" class="diff-lineno">第38行：</td>
<td colspan="2" class="diff-lineno">第38行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;">注意：以上链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><span style="color:red;font-weight:bold;background:yellow;">注意：以上链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Category:CSS]]</ins></div></td></tr>
</table>
yoom
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=5489&oldid=prev
yoom：/*添加图片文字说明*/
2009-03-17T01:28:14Z
<p><span dir="auto"><span class="autocomment">添加图片文字说明</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">←上一版本</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">2009-03-17T01:28:14的版本</td>
</tr><tr><td colspan="2" class="diff-lineno">第2行：</td>
<td colspan="2" class="diff-lineno">第2行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>让我们来看一张图片，这是Windows XP <del class="diffchange diffchange-inline">显示属性的部分截图：</del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>让我们来看一张图片，这是Windows XP <ins class="diffchange diffchange-inline">“显示”属性的部分截图：</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[File:20090316221535000.<ins class="diffchange diffchange-inline">png|frame|none|Windows XP “显示”属性窗体的部分截图</ins>]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[File:20090316221535000.<del class="diffchange diffchange-inline">png</del>]]</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>我们可以在XP操作系统以及一些应用程序中频繁看见类似的交互组件，这样，我们不必打开多个窗口就能完成较为丰富的操作。</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>我们可以在XP操作系统以及一些应用程序中频繁看见类似的交互组件，这样，我们不必打开多个窗口就能完成较为丰富的操作。</div></td></tr>
<tr><td colspan="2" class="diff-lineno">第10行：</td>
<td colspan="2" class="diff-lineno">第9行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>正如某些JavaScript程序模仿出了操作系统的拖拽功能，选项卡也被模拟到了web页面中。这不但简化了操作步骤，也更符合人们的使用逻辑。</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>正如某些JavaScript程序模仿出了操作系统的拖拽功能，选项卡也被模拟到了web页面中。这不但简化了操作步骤，也更符合人们的使用逻辑。</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>== <del class="diffchange diffchange-inline">Tab选项卡的优点： </del>==</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>== <ins class="diffchange diffchange-inline">Tab选项卡的优点 </ins>==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>能在有限的容器内完成较为丰富的操作。</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>能在有限的容器内完成较为丰富的操作。</div></td></tr>
</table>
yoom
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=5488&oldid=prev
yoom：/*添加了一个图片*/
2009-03-16T15:55:16Z
<p><span dir="auto"><span class="autocomment">添加了一个图片</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">←上一版本</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">2009-03-16T15:55:16的版本</td>
</tr><tr><td colspan="2" class="diff-lineno">第3行：</td>
<td colspan="2" class="diff-lineno">第3行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>让我们来看一张图片，这是Windows XP 显示属性的部分截图：</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>让我们来看一张图片，这是Windows XP 显示属性的部分截图：</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:20090316221535000.png]]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>我们可以在XP操作系统以及一些应用程序中频繁看见类似的交互组件，这样，我们不必打开多个窗口就能完成较为丰富的操作。</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>我们可以在XP操作系统以及一些应用程序中频繁看见类似的交互组件，这样，我们不必打开多个窗口就能完成较为丰富的操作。</div></td></tr>
</table>
yoom
http://wiki.blueidea.com/index.php?title=Tab%E9%80%89%E9%A1%B9%E5%8D%A1&diff=5486&oldid=prev
yoom：创建新页面为 '== 选项卡是一种利用有限的容器来完成较多操作的交互组件 == 让我们来看一张图片，这是Windows XP 显示属性的部分截图： 我们可以...'
2009-03-16T15:52:00Z
<p>创建新页面为 '== 选项卡是一种利用有限的容器来完成较多操作的交互组件 == 让我们来看一张图片，这是Windows XP 显示属性的部分截图： 我们可以...'</p>
<p><b>新页面</b></p><div>== 选项卡是一种利用有限的容器来完成较多操作的交互组件 ==<br />
<br />
<br />
让我们来看一张图片，这是Windows XP 显示属性的部分截图：<br />
<br />
我们可以在XP操作系统以及一些应用程序中频繁看见类似的交互组件，这样，我们不必打开多个窗口就能完成较为丰富的操作。<br />
<br />
正如某些JavaScript程序模仿出了操作系统的拖拽功能，选项卡也被模拟到了web页面中。这不但简化了操作步骤，也更符合人们的使用逻辑。<br />
<br />
== Tab选项卡的优点： ==<br />
<br />
能在有限的容器内完成较为丰富的操作。<br />
<br />
不必预先准备数据，完全可以在用户激活某个Tab时再加载数据，这依赖于[[Ajax]]的操作流程。<br />
<br />
== Tab选项卡的缺点 ==<br />
<br />
因为web页面牵涉的问题非常多，其中较重要的一个是可访问性。<br />
<br />
实现tab选项卡需要考虑CSS的实现成本和搜索引擎的理解能力（或无样式时的可读性问题），这需要作者发挥智慧来找到一个平衡点。<br />
有作者在思考禁用JavaScript时选项卡的失效问题[http://www.macji.com/2008/11/03/progressive-enhancement-of-the-tab/ Progressive Enhancement 的 Tab]。<br />
<br />
== 基本原理 ==<br />
<br />
#当激活某个Tab时（一般为Click、Mouserover事件，也可能使用setInterval()来自动激活）。<br />
#显示对应的区域，并隐藏其它区域（这取决代码实现方式，也可能是先隐藏后显示）。<br />
<br />
== Tab选项卡的实例 ==<br />
<br />
<span style="color:red;font-weight:bold;background:yellow;">注意：以下链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span><br />
<br />
*http://bbs.blueidea.com/thread-2606562-1-1.html 仿windows选项卡效果拾零<br />
*http://bbs.blueidea.com/thread-2771510-1-1.html CSS网页选项卡（可下载到本地)<br />
*http://bbs.blueidea.com/thread-2795660-1-1.html 可多次使用的仿126邮箱选项卡的源码<br />
*http://bbs.blueidea.com/thread-2747827-1-1.html 三种简洁的Tab导航（网页选项卡）简析<br />
*http://bbs.blueidea.com/thread-2884588-1-1.html 纯手工写的一个选项卡切换<br />
<br />
<span style="color:red;font-weight:bold;background:yellow;">注意：以上链接均为2008年12月份前的帖子，如非必要，请不要做无意义回复，以免被评价为恶意顶帖。</span></div>
yoom