欧美激情网,国产欧美亚洲高清,欧美屁股xxxxx,欧美群妇大交群,欧美人与物ⅴideos另类,区二区三区在线 | 欧洲

知識(shí)學(xué)堂
  • ·聯(lián)系電話:+86.023-75585550
  • ·聯(lián)系傳真:+86.023-75585550
  • ·24小時(shí)手機(jī):13896886023
  • ·QQ 咨 詢：361652718 513960520
當(dāng)前位置 > 首頁 > 知識(shí)學(xué)堂 > 網(wǎng)站建設(shè)知識(shí)
3款簡(jiǎn)潔的網(wǎng)頁標(biāo)簽選項(xiàng)卡導(dǎo)航代碼分析
更新時(shí)間：2012-01-28 | 發(fā)布人：本站 | 點(diǎn)擊率：204 次
在網(wǎng)頁中加入標(biāo)簽選項(xiàng)卡可以使網(wǎng)頁顯得更緊湊，結(jié)合AJAX技術(shù)可以使頁面在有限的空間內(nèi)展現(xiàn)更多的內(nèi)容。本文主要介紹幾種簡(jiǎn)潔的選項(xiàng)卡效果的實(shí)現(xiàn)（不涉及滑動(dòng)門和AJAX），兼容性較好，方便大家直接使用。
    第一種: 通過更換顯示樣式實(shí)現(xiàn)，這種很常見，就不多說了。
<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 >特效</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)定位，通過改變層的左距離(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="httt://www.qpsh.com">特效</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>
相關(guān)文章