色综合久久中文字幕有码,欧美激情在线狂野欧美精品

　三種簡(jiǎn)潔的Tab導(dǎo)航簡(jiǎn)析

作者：easeman 　時(shí)間： 2007-08-22　文檔類型：原創(chuàng)　來(lái)自：藍(lán)色理想

在網(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í)例，無(wú)圖片，兼容性較好，方便大家直接使用。

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

第二種形式: 這種結(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)了。

第一、二種形式的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)效果。

效果演示：

運(yùn)行代碼框
<!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>簡(jiǎn)潔Tab</title> <style type="text/css">  </style> <script>  </script> </head> <body> <br /> <br />  <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> <br /> <br />  <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> <br /> <br />  <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> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2747827-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2007/4904.asp　

出處：藍(lán)色理想
責(zé)任編輯：moby

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

更多相關(guān)鏈接

2007流行網(wǎng)站導(dǎo)航設(shè)計(jì)欣賞

Tab式位置導(dǎo)航變體

徹底弄懂CSS盒子模式之二

中英文雙語(yǔ)導(dǎo)航菜單

傾斜的鼠標(biāo)翻轉(zhuǎn)導(dǎo)航制作上的煩惱


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大福“敬•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx