非常不錯(cuò)的三種簡(jiǎn)潔的Tab導(dǎo)航（網(wǎng)頁(yè)選項(xiàng)卡）簡(jiǎn)析
更新時(shí)間：2007年08月31日 21:27:24 作者：
在網(wǎng)頁(yè)中應(yīng)用選項(xiàng)卡可以使網(wǎng)頁(yè)顯得更緊湊，結(jié)合AJAX技術(shù)可以使頁(yè)面在有限的空間內(nèi)展現(xiàn)更多的內(nèi)容。本文主要介紹幾種簡(jiǎn)潔的選項(xiàng)卡效果的實(shí)現(xiàn)（不涉及滑動(dòng)門(mén)和AJAX），附有實(shí)例，無(wú)圖片，兼容性較好，方便大家直接使用。
第一種形式: 通過(guò)更換顯示樣式實(shí)現(xiàn)，這種很常見(jiàn)，就不多說(shuō)了。
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新聞</li>
<li onclick="setTab(0,1)">評(píng)論</li>
<li onclick="setTab(0,2)">技術(shù)</li>
<li onclick="setTab(0,3)">點(diǎn)評(píng)</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新聞列表</li></ul>
<ul><li>評(píng)論列表</li></ul>
<ul><li>技術(shù)列表</li></ul>
<ul><li>點(diǎn)評(píng)列表</li></ul>
</div>
</div>
第二種形式: 這種結(jié)構(gòu)比較復(fù)雜一些，外面加一個(gè)相對(duì)層(.menu1box)，設(shè)置溢出隱藏，將選項(xiàng)卡(#menu1)設(shè)為絕對(duì)定位，設(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)的背景為白色時(shí)便可遮住一部分主區(qū)塊的上邊框。這樣效果就實(shí)現(xiàn)了。
<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="#">評(píng)論</a></li>
<li onmouseover="setTab(1,2)"><a href="#">技術(shù)</a></li>
<li onmouseover="setTab(1,3)"><a href="#">點(diǎn)評(píng)</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li>新聞列表</li></ul>
<ul><li>評(píng)論列表</li></ul>
<ul><li>技術(shù)列表</li></ul>
<ul><li>點(diǎn)評(píng)列表</li></ul>
</div>
</div>
</div>
第一、二種形式的JS代碼:
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*獲取選項(xiàng)卡的LI對(duì)象*/
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對(duì)象的樣式，如果是選定的項(xiàng)則使用.hover樣式*/
mli[i].style.display=i==n?"block":"none"; /*確定主區(qū)域顯示哪一個(gè)對(duì)象*/
}
}
第三種形式: 這也是一種不常用的方式，加一個(gè)相對(duì)層(.menu2box)，利用一個(gè)背景層(#tip2)定位，通過(guò)改變層的左距離(left)實(shí)現(xiàn)效果。
<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="#">評(píng)論</a></li>
<li onmouseover="nowtab(2,2)"><a href="#">技術(shù)</a></li>
<li onmouseover="nowtab(2,3)"><a href="#">點(diǎn)評(píng)</a></li>
</ul>
</div>
<div class="main" id="main2">
新聞內(nèi)容
</div>
</div>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
第一種形式: 通過(guò)更換顯示樣式實(shí)現(xiàn)，這種很常見(jiàn)，就不多說(shuō)了。
復(fù)制代碼 代碼如下:
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新聞</li>
<li onclick="setTab(0,1)">評(píng)論</li>
<li onclick="setTab(0,2)">技術(shù)</li>
<li onclick="setTab(0,3)">點(diǎn)評(píng)</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新聞列表</li></ul>
<ul><li>評(píng)論列表</li></ul>
<ul><li>技術(shù)列表</li></ul>
<ul><li>點(diǎn)評(píng)列表</li></ul>
</div>
</div>
第二種形式: 這種結(jié)構(gòu)比較復(fù)雜一些，外面加一個(gè)相對(duì)層(.menu1box)，設(shè)置溢出隱藏，將選項(xiàng)卡(#menu1)設(shè)為絕對(duì)定位，設(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)的背景為白色時(shí)便可遮住一部分主區(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="#">評(píng)論</a></li>
<li onmouseover="setTab(1,2)"><a href="#">技術(shù)</a></li>
<li onmouseover="setTab(1,3)"><a href="#">點(diǎn)評(píng)</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li>新聞列表</li></ul>
<ul><li>評(píng)論列表</li></ul>
<ul><li>技術(shù)列表</li></ul>
<ul><li>點(diǎn)評(píng)列表</li></ul>
</div>
</div>
</div>
第一、二種形式的JS代碼:
復(fù)制代碼 代碼如下:
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*獲取選項(xiàng)卡的LI對(duì)象*/
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對(duì)象的樣式，如果是選定的項(xiàng)則使用.hover樣式*/
mli[i].style.display=i==n?"block":"none"; /*確定主區(qū)域顯示哪一個(gè)對(duì)象*/
}
}
第三種形式: 這也是一種不常用的方式，加一個(gè)相對(duì)層(.menu2box)，利用一個(gè)背景層(#tip2)定位，通過(guò)改變層的左距離(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="#">評(píng)論</a></li>
<li onmouseover="nowtab(2,2)"><a href="#">技術(shù)</a></li>
<li onmouseover="nowtab(2,3)"><a href="#">點(diǎn)評(píng)</a></li>
</ul>
</div>
<div class="main" id="main2">
新聞內(nèi)容
</div>
</div>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- 關(guān)于Blog頂部的滾動(dòng)導(dǎo)航條代碼
- 推薦三種簡(jiǎn)潔的Tab導(dǎo)航（網(wǎng)頁(yè)選項(xiàng)卡）簡(jiǎn)析
- Javascript Tab 導(dǎo)航插件 (23個(gè))
- 基于Jquery的$.cookie()實(shí)現(xiàn)跨越頁(yè)面tabs導(dǎo)航實(shí)現(xiàn)代碼
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- 隨窗體滑動(dòng)的小插件sticky源碼
- JS幻燈片可循環(huán)播放可平滑旋轉(zhuǎn)帶滾動(dòng)導(dǎo)航(自寫(xiě))
- 導(dǎo)航跟隨滾動(dòng)條置頂移動(dòng)示例代碼
- sencha touch 模仿tabpanel導(dǎo)航欄TabBar的實(shí)例代碼
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- 使用Sticky組件實(shí)現(xiàn)帶sticky效果的tab導(dǎo)航和滾動(dòng)導(dǎo)航的方法
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Javascript處理循環(huán)的異步操作的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
js關(guān)于精確計(jì)算和數(shù)值格式化以及直接引js文件
本文為大家介紹下關(guān)于精確計(jì)算和數(shù)值格式化以及直接引js文件，大家可以學(xué)習(xí)下2014-01-01
echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,ECharts是百度前端開(kāi)發(fā)部開(kāi)發(fā)的一個(gè)開(kāi)源可視化庫(kù),它可以幫助開(kāi)發(fā)者輕松的實(shí)現(xiàn)各種數(shù)據(jù)可視化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了js添加類(lèi)名的兩種方法,一種是通過(guò)className來(lái)添加、刪除類(lèi)名,另一種是通過(guò)classList來(lái)添加、刪除類(lèi)名,感興趣的朋友跟隨小編一起看看吧2023-11-11
JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合實(shí)例形式分析了使用indexOf()方法進(jìn)行數(shù)組的判斷與去重相關(guān)原理與具體操作技巧,需要的朋友可以參考下2018-09-09
在線(xiàn)所見(jiàn)即所得HTML編輯器的實(shí)現(xiàn)原理淺析
這篇文章主要介紹了在線(xiàn)所見(jiàn)即所得HTML編輯器的實(shí)現(xiàn)原理淺析,本文用初始化、打開(kāi)編輯功能、獲取編輯器的內(nèi)容、增加樣式設(shè)置、再進(jìn)一步等步驟闡述在線(xiàn)編輯器的基本實(shí)現(xiàn)原理,需要的朋友可以參考下2015-04-04
JavaScript自動(dòng)設(shè)置IFrame高度的小例子
JavaScript自動(dòng)設(shè)置IFrame高度的小例子，需要的朋友可以參考一下2013-06-06
fetch是一種HTTP數(shù)據(jù)請(qǐng)求的方式,是XMLHttpRequest的一種替代方案,fetch不是ajax的進(jìn)一步封裝,而是原生js,下面這篇文章主要給大家介紹了關(guān)于js fetch異步請(qǐng)求使用的相關(guān)資料,需要的朋友可以參考下2021-11-11
基于原生JS實(shí)現(xiàn)分頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生js實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層物件名稱(chēng), 這是用來(lái)設(shè)定一個(gè)時(shí)間, 時(shí)間到了, 就會(huì)執(zhí)行一個(gè)指定的 method2013-04-04