仿126邮箱选项卡

选项卡我们这论坛里有不少，但同一个页面可以多次使用的可能没多少，我这个可以在同一个页面里可以有多个选项卡块.用了一个背景图。

    背景图片已上传上去了，支持我的帮顶一下，俺昨天花费几个小时啊。

    终于适应Ie、ff 浏览器，现在所有代码公开给大家，希望大家喜欢，要用的赶紧拿去用吧。

    类似于下面效果：

         背景图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >     <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>如果效果显示有错，请将代码另存为HTML页面再运行！<br>     <div id="Tab1">     <div class="Menubox">     <ul>      <li id="one1" onclick="setTab('one',1,4)" class="hover">飞腾设计网</li>      <li id="one2" onclick="setTab('one',2,4)" >飞腾创意论坛</li>      <li id="one3" onclick="setTab('one',3,4)">FeitecCMS Pro</li>      <li id="one4" onclick="setTab('one',4,4)">FeitecCMS Free</li>     </ul>     </div>     <div class="Contentbox">      <div id="con_one_1" class="hover">飞腾设计网www.feitec.com：创意无限，真诚永远！</div>      <div id="con_one_2" style="display:none">bbs.feitec.com</div>      <div id="con_one_3" style="display:none">ProInfo.asp</div>      <div id="con_one_4" style="display:none">http://demo.feitec.com</div>     </div>     </div>     <br>     <div id="Tab2">     <div class="Menubox">     <ul>      <li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li>      <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>      <li id="two3" onclick="setTab('two',3,4)">新闻3</li>      <li id="two4" onclick="setTab('two',4,4)">新闻4</li>     </ul>     </div>     <div class="Contentbox">      <div id="con_two_1" >新闻列表1</div>      <div id="con_two_2" style="display:none">新闻列表2</div>      <div id="con_two_3" style="display:none">新闻列表3</div>      <div id="con_two_4" style="display:none">新闻列表4</div>     </div>     </div>     </body>     </html>

其它修改说明：

1、再加一个选项：

再加一个div块时只要

看到上面的two没有，把上面的这段复制下，把two改成three，或任何一个不同名的id，tab2也要改，改成tab3吧，同一个页面div,id总不能重复吧，这样就完成了。

2、鼠标移上去，自动变换：

把onclick改成onMouseOver就是鼠标了~!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <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="Tab1"> <div class="Menubox"> <ul> <li id="one1" onmouseover="setTab('one',1,4)" class="hover">新闻1</li> <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li> <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li> <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" class="hover">新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div> <br> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onmouseover="setTab('two',1,4)" class="hover">新闻1</li> <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li> <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li> <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> </body> </html>

更多的仿126邮箱选项卡请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2008-5-3