建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹web開(kāi)發(fā)中Tab導(dǎo)航的示例代碼，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)于2013年開(kāi)始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元懷寧做網(wǎng)站,已為上家服務(wù),為懷寧各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
在網(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ō)了。
CODE:
- 評(píng)論列表
- 技術(shù)列表
- 點(diǎn)評(píng)列表
第 二種形式: 這種結(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:
- 評(píng)論列表
- 技術(shù)列表
- 點(diǎn)評(píng)列表
第 一、二種形式的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 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)效果。 CODE:
新聞內(nèi)容
以上是“web開(kāi)發(fā)中Tab導(dǎo)航的示例代碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
名稱欄目：web開(kāi)發(fā)中Tab導(dǎo)航的示例代碼
文章位置：http://fisionsoft.com.cn/article/gehood.html
