快捷導(dǎo)航

javascript仿126郵箱TAB切換效果

更新時(shí)間：2008年09月05日 16:56:17 作者：

仿126中的綠色tab切換效果，比較漂亮

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>簡(jiǎn)潔Tab</title> <style type="text/css">  </style>  </head> <body>  <div   class="wppm3vysvbp"   id="Tab1"> <div   id="wppm3vysvbp"   class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,4)" class="hover">新聞1</li> <li id="one2" onclick="setTab('one',2,4)" >新聞2</li> <li id="one3" onclick="setTab('one',3,4)">新聞3</li> <li id="one4" onclick="setTab('one',4,4)">新聞4</li> </ul> </div> <div   id="wppm3vysvbp"   class="Contentbox"> <div   class="wppm3vysvbp"   id="con_one_1" class="hover">新聞列表1</div> <div   class="wppm3vysvbp"   id="con_one_2" style="display:none">新聞列表2</div> <div   class="wppm3vysvbp"   id="con_one_3" style="display:none">新聞列表3</div> <div   class="wppm3vysvbp"   id="con_one_4" style="display:none">新聞列表4</div> </div> </div>  <div   class="wppm3vysvbp"   id="Tab2"> <div   id="wppm3vysvbp"   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   id="wppm3vysvbp"   class="Contentbox"> <div   class="wppm3vysvbp"   id="con_two_1" >新聞列表1</div> <div   class="wppm3vysvbp"   id="con_two_2" style="display:none">新聞列表2</div> <div   class="wppm3vysvbp"   id="con_two_3" style="display:none">新聞列表3</div> <div   class="wppm3vysvbp"   id="con_two_4" style="display:none">新聞列表4</div> </div> </div> </body>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: