三種簡(jiǎn)潔的Tab導(dǎo)航（網(wǎng)頁(yè)選項(xiàng)卡）簡(jiǎn)析
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在網(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)門和AJAX），附有實(shí)例，無圖片，兼容性較好，方便大家直接使用。
第一種形式: 通過更換顯示樣式實(shí)現(xiàn)，這種很常見，就不多說了。
CODE:
第一、二種形式的JS代碼:
CODE:
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新聞
第二種形式: 這種結(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)了。
CODE:
新聞內(nèi)容
[/code] 該文章在 2010/8/13 22:23:37 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
