• 指間主站
• 空間域名
• 企業郵局
• 在線商城
• 幫助中心
• 支付方式
• 收藏本站

QQ 咨詢：361652718  513960520

• 域名注冊
• 網站建設
• 虛擬主機
• 企業郵局
• 智能建站
• 平面設計
• 多媒體制作
• 改版維護
• 網站推廣
• 程序開發
• 電腦維修

• ·聯系電話:+86.023-75585550
• ·聯系傳真:+86.023-75585550
• ·24小時手機:13896886023
• ·QQ 咨 詢：361652718 513960520

3款簡潔的網頁標簽選項卡導航代碼分析

更新時間：2012-01-28 | 發布人：本站 | 點擊率：226 次

在網頁中加入標簽選項卡可以使網頁顯得更緊湊，結合AJAX技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹幾種簡潔的選項卡效果的實現（不涉及滑動門和AJAX），兼容性較好，方便大家直接使用。
    第一種: 通過更換顯示樣式實現，這種很常見，就不多說了。
<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>
    第二種形式: 這種結構比較復雜一些，外面加一個相對層(.menu1box)，設置溢出隱藏，將選項卡(#menu1)設為絕對定位，設置層指針為1(z-index:1;)，以便可以遮住下主區塊(.main1box)1px的高度。設置主區塊的邊框為1px的黑邊，上空白(margin-top)為-1px，使上邊框伸到選項卡下。當改變選項卡某項(li)的背景為白色時便可遮住一部分主區塊的上邊框。這樣效果就實現了。
<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 >特效</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>
第一、二種形式的JS代碼:
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*獲取選項卡的LI對象*/
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*獲取主顯示區域對象*/
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":""; /*更改選項卡的LI對象的樣式，如果是選定的項則使用.hover樣式*/
mli[i].style.display=i==n?"block":"none"; /*確定主區域顯示哪一個對象*/
}
}
第三種: 這也是一種不常用的方式，加一個相對層(.menu2box)，利用一個背景層(#tip2)定位，通過改變層的左距離(left)實現效果。
<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="httt://www.qpsh.com">特效</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>