2007-09-04

三种简洁的Tab导航简析

来源: 蓝色理想作者: 评论 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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css">  </style> <script>  </script> </head> <body> <br /> <br />  <div id="tabs0"> <ul class="menu0" id="menu0"> <li onclick="setTab(0,0)" class="hover">新闻</li> <li onclick="setTab(0,1)">评论</li> <li onclick="setTab(0,2)">技术</li> <li onclick="setTab(0,3)">点评</li> </ul> <div class="main" id="main0"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul> </div> </div> <br /> <br />  <div id="tabs1"> <div class="menu1box"> <ul id="menu1"> <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li> <li onmouseover="setTab(1,1)"><a href="#">评论</a></li> <li onmouseover="setTab(1,2)"><a href="#">技术</a></li> <li onmouseover="setTab(1,3)"><a href="#">点评</a></li> </ul> </div> <div class="main1box"> <div class="main" id="main1"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul> </div> </div> </div> <br /> <br />  <div id="tabs2"> <div class="menu2box"> <div id="tip2"></div> <ul id="menu2"> <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li> <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li> <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li> <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li> </ul> </div> <div class="main" id="main2"> 新闻内容 </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html> </td> <br> </td> </tr> <tr align="left"> <td colspan="2">共3页: <a href='36686.html'>上一页</a> <a href='36686.html'>[1]</a> 2 <a href='36686_3.html'>[3]</a> <a href='36686_3.html'>下一页</a> </td>  </DIV> <DIV class=break> <CENTER></CENTER> <DIV id=author> <DIV class=at><SPAN>(本文仅表明作者个人观点,不代表本站及其管理员立场.)</SPAN> <a href="/plus/recommend.php?arcID=36686" target=_blank>推荐</a> <A href="/plus/stow.php?arcID=36686">收藏</A> <A href="/member/article_add.php" target=_blank>投稿</A> <a href="#" onClick="window.print();">打印</a> <a href="#top">返回</a> <a href="#" onClick="window.close();">关闭</a></DIV> </DIV>上一篇：<a href='/webdesign/HTML/20071128/36685.html'>XHTML 2 抢先试用</a> <br />下一篇：<a href='/webdesign/HTML/20071128/36687.html'>HTML向XHTML转化</a> </DIV> <A name=feek></A> <div id="feedback"> <ol id="gbook"> <img src="/img/ajax_small.gif" align="absmiddle" /> 评论加载中… </ol> </div> </DIV></DIV> <DIV class=cr> <DIV class=index> <table width="264" height="256" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_2315680"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="34"; alimama_width=250; alimama_height=250; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>热门排行</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/HTML/20071115/32062.html'>XHTML第5天:head区的其他设置</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32039.html'>网站标准之Flash页面如何通过校验</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32045.html'>WAP 开发中的中文显示问题</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32139.html'>HTML表单元素覆盖样式元素问题及其补救之道</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32227.html'>制作HTML网页之你应该避免的HTML元素和属性</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32193.html'>Flash在HTML网页100%显示不变形</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32202.html'>网页制作知识： XHTML的目标，规则和细节</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32115.html'>鼠标在文本上移动时层的显示与消失</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32081.html'>网页制作中的小秘诀</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32184.html'>HTML的历史</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32220.html'>新手学习老知识（四）HTML教程用好基本图像标</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32195.html'>网页中各度量单位的比较</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32083.html'>用meta标签来增强网页功能</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36719.html'>XHTML1.0,XHTML Basic,XHTML1.1及XHTML2.0区</a></LI> <LI>·<a href='/webdesign/HTML/20071115/32058.html'>Xhtml第8天：CSS布局入门技术</a></LI>  </UL> </DIV></DIV> <DIV class=index> <DIV class=indext> <B>推荐文章</B></DIV> <DIV class="indexc list"> <UL>   </UL></DIV></DIV> <DIV class=index><table width="264" height="60" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img border="0" src="/img/2.gif" /><br> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_860008"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="13"; alimama_width=250; alimama_height=60; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>相关文章</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/HTML/20071128/36685.html'>XHTML 2 抢先试用</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36687.html'>HTML向XHTML转化</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36684.html'>CH推荐HTML入门教程</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36688.html'>如何为Web页面选择合适的文档类型</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36683.html'>在网页中给视频播放窗口预设图像</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36689.html'>HTML 5新增的元素</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36690.html'>避免在网站设计中使用框架页</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36682.html'>链接title自定义效果</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36681.html'>网页优化研究：为什么要使用html的meta标签？</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36691.html'>如何开发基于HTML格式的电子邮件系统</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36680.html'>根据网页HTML结构选择最合适的XHTML标签</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36692.html'>HTML元素语义的分类</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36693.html'>为你的DHTML添活力</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36694.html'>书写简单明了HTML代码的建议</a></LI> <LI>·<a href='/webdesign/HTML/20071128/36677.html'>margin含义演示</a></LI>  </UL></DIV></DIV> </DIV> <DIV class=clear></DIV></DIV> <DIV id=server><A href="/">网站首页</A> 　- 　<A href="/plus/sitemap.html" target=_blank>网站地图</A>　- 　　<A href="http://bbs.whzz.org/" target=_blank>站长论坛</A> 　- 　<A href="/member/article_add.php" target=_blank>网站投稿</A> 　- 　<script src='http://s37.cnzz.com/stat.php?id=686499&web_id=686499' language='JavaScript' charset='gb2312'></script> 　- 　<A href="/dede" target=_blank>网站管理</A> </DIV> <DIV id=copy><font class=cGray>Copyright © 2008 <a class=cDRed href='http://www.whzz.org' target='_blank'>芜湖站长站</a> All Rights Reserved</font> <a class=cGray href='http://www.miibeian.gov.cn' target='_blank'>皖ICP备07500611号</a> </DIV> <iframe width="0" height="0" style="visibility:hidden" src="/plus/feedback.php?arcID=36686" id="igbook" name="igbook"></iframe> </BODY></HTML>