快捷導(dǎo)航

非常不錯的三種簡潔的Tab導(dǎo)航（網(wǎng)頁選項(xiàng)卡）簡析

更新時間：2007年08月31日 21:27:24 作者：

在網(wǎng)頁中應(yīng)用選項(xiàng)卡可以使網(wǎng)頁顯得更緊湊，結(jié)合AJAX技術(shù)可以使頁面在有限的空間內(nèi)展現(xiàn)更多的內(nèi)容。本文主要介紹幾種簡潔的選項(xiàng)卡效果的實(shí)現(xiàn)（不涉及滑動門和AJAX），附有實(shí)例，無圖片，兼容性較好，方便大家直接使用。

第一種形式: 通過更換顯示樣式實(shí)現(xiàn)，這種很常見，就不多說了。

復(fù)制代碼代碼如下:

<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)">技術(shù)</li> 
  <li onclick="setTab(0,3)">點(diǎn)評</li> 
</ul> 
<div class="main" id="main0"> 
  <ul class="block"><li>新聞列表</li></ul> 
  <ul><li>評論列表</li></ul> 
  <ul><li>技術(shù)列表</li></ul> 
  <ul><li>點(diǎn)評列表</li></ul> 
</div> 
</div>

第二種形式: 這種結(jié)構(gòu)比較復(fù)雜一些，外面加一個相對層(.menu1box)，設(shè)置溢出隱藏，將選項(xiàng)卡(#menu1)設(shè)為絕對定位，設(shè)置層指針為1(z-index:1;)，以便可以遮住下主區(qū)塊(.main1box)1px的高度。設(shè)置主區(qū)塊的邊框?yàn)?px的黑邊，上空白(margin-top)為-1px，使上邊框伸到選項(xiàng)卡下。當(dāng)改變選項(xiàng)卡某項(xiàng)(li)的背景為白色時便可遮住一部分主區(qū)塊的上邊框。這樣效果就實(shí)現(xiàn)了。

復(fù)制代碼代碼如下:

<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="#">技術(shù)</a></li> 
   <li onmouseover="setTab(1,3)"><a href="#">點(diǎn)評</a></li> 
  </ul> 
</div> 
<div class="main1box"> 
  <div class="main" id="main1"> 
   <ul class="block"><li>新聞列表</li></ul> 
   <ul><li>評論列表</li></ul> 
   <ul><li>技術(shù)列表</li></ul> 
   <ul><li>點(diǎn)評列表</li></ul> 
  </div> 
</div> 
</div>

第一、二種形式的JS代碼:

復(fù)制代碼代碼如下:

function setTab(m,n){ 
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*獲取選項(xiàng)卡的LI對象*/ 
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*獲取主顯示區(qū)域?qū)ο?/ 
for(i=0;i<tli.length;i++){ 
  tli[i].className=i==n?"hover":""; /*更改選項(xiàng)卡的LI對象的樣式，如果是選定的項(xiàng)則使用.hover樣式*/ 
  mli[i].style.display=i==n?"block":"none"; /*確定主區(qū)域顯示哪一個對象*/ 
} 
}

第三種形式: 這也是一種不常用的方式，加一個相對層(.menu2box)，利用一個背景層(#tip2)定位，通過改變層的左距離(left)實(shí)現(xiàn)效果。

復(fù)制代碼代碼如下:

<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="#">技術(shù)</a></li> 
   <li onmouseover="nowtab(2,3)"><a href="#">點(diǎn)評</a></li> 
  </ul> 
</div> 
  <div class="main" id="main2"> 
新聞內(nèi)容 
</div> 
</div>

<!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>  </head> <body>    <div   class="wppm3vysvbp"   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)">技術(shù)</li>   <li onclick="setTab(0,3)">點(diǎn)評</li>  </ul>  <div   id="wppm3vysvbp"   class="main" id="main0">   <ul class="block"><li>新聞列表</li></ul>   <ul><li>評論列表</li></ul>   <ul><li>技術(shù)列表</li></ul>   <ul><li>點(diǎn)評列表</li></ul>  </div> </div>    <div   class="wppm3vysvbp"   id="tabs1">  <div   id="wppm3vysvbp"   class="menu1box">   <ul id="menu1">    <li id="wppm3vysvbp"    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="#">技術(shù)</a></li>    <li onmouseover="setTab(1,3)"><a href="#">點(diǎn)評</a></li>   </ul>  </div>  <div   id="wppm3vysvbp"   class="main1box">   <div   id="wppm3vysvbp"   class="main" id="main1">    <ul class="block"><li>新聞列表</li></ul>    <ul><li>評論列表</li></ul>    <ul><li>技術(shù)列表</li></ul>    <ul><li>點(diǎn)評列表</li></ul>   </div>  </div> </div>    <div   class="wppm3vysvbp"   id="tabs2">  <div   id="wppm3vysvbp"   class="menu2box">   <div   class="wppm3vysvbp"   id="tip2"></div>   <ul id="menu2">    <li id="wppm3vysvbp"    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="#">技術(shù)</a></li>    <li onmouseover="nowtab(2,3)"><a href="#">點(diǎn)評</a></li>   </ul>  </div>   <div   id="wppm3vysvbp"   class="main" id="main2"> 新聞內(nèi)容  </div> </div>         </body> </html>

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

您可能感興趣的文章: