web開發中Tab導航的示例代碼

這篇文章主要介紹web開發中Tab導航的示例代碼，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

第一種形式: 通過更換顯示樣式實現，這種很常見，就不多說了。

CODE:

<div id=”tabs0&Prime;>

<ul id=”menu0&Prime;>

<li onclick=”setTab(0,0)” <li onclick=”setTab(0,1)”& gt;評論</li>

<li onclick=”setTab(0,2)”>技術</li& gt;

<li onclick=”setTab(0,3)”>點評</li>

</ul>

<div id=”main0&Prime;>

<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)的背景為白色時便可遮住一部分主區塊的上邊框。這樣效果就實現了。

CODE:

<div id=”tabs1&Prime;>

<div <ul id=”menu1&Prime;>

<li onmouseover=”setTab(1,0)”><a href=”#” mce_href=”#”>新聞</a></li>

<li onmouseover=”setTab(1,1)”><a href=”#” mce_href=”#”>評論</a></li>

<li onmouseover=”setTab(1,2)”><a href=”#” mce_href=”#”>技術</a></li>

<li onmouseover=”setTab(1,3)”><a href=”#” mce_href=”#”>點評</a></li>

</ul>

</div>

<div <div id=”main1&Prime;>

<ul <ul><li>評論列表</li></ul>

<ul><li>技術列表</li></ul>

<ul><li>點評列表</li></ul>

</div>

</div>

</div>

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

CODE:

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)實現效果。

CODE:

<div id=”tabs2&Prime;>

<div <div id=”tip2&Prime;></div>

<ul id=”menu2&Prime;>

<li onmouseover=”nowtab(2,0)”><a href=”#” mce_href=”#”>新聞</a></li>

<li onmouseover=”nowtab(2,1)”><a href=”#” mce_href=”#”>評論</a></li>

<li onmouseover=”nowtab(2,2)”><a href=”#” mce_href=”#”>技術</a></li>

<li onmouseover=”nowtab(2,3)”><a href=”#” mce_href=”#”>點評</a></li>

</ul>

</div>

<div id=”main2&Prime;>

新聞內容

</div>

</div>

以上是“web開發中Tab導航的示例代碼”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！