佳木斯湛栽影视文化发展公司

主頁(yè) > 知識(shí)庫(kù) > 推薦三種簡(jiǎn)潔的Tab導(dǎo)航(網(wǎng)頁(yè)選項(xiàng)卡)簡(jiǎn)析

推薦三種簡(jiǎn)潔的Tab導(dǎo)航(網(wǎng)頁(yè)選項(xiàng)卡)簡(jiǎn)析

熱門(mén)標(biāo)簽:檢查注冊(cè)表項(xiàng) 銀行業(yè)務(wù) 智能手機(jī) 服務(wù)器配置 網(wǎng)站文章發(fā)布 鐵路電話系統(tǒng) 呼叫中心市場(chǎng)需求 美圖手機(jī)
在網(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ō)了。
復(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;itli.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)航條代碼
  • 非常不錯(cuò)的三種簡(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)航的方法

標(biāo)簽:河南 沈陽(yáng) 滄州 紅河 長(zhǎng)治 新疆 樂(lè)山 上海

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《推薦三種簡(jiǎn)潔的Tab導(dǎo)航(網(wǎng)頁(yè)選項(xiàng)卡)簡(jiǎn)析》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢(xún)

    • 400-1100-266
    宁化县| 齐齐哈尔市| 佛坪县| 炎陵县| 乳山市| 如东县| 赤峰市| 福海县| 遂平县| 民丰县| 新宁县| 屏东县| 永善县| 仲巴县| 青河县| 清流县| 七台河市| 永州市| 土默特右旗| 轮台县| 永丰县| 宜城市| 昌江| 六盘水市| 仪征市| 合水县| 东乌珠穆沁旗| 嘉祥县| 松滋市| 宁阳县| 溧水县| 永平县| 砚山县| 南川市| 通榆县| 永川市| 政和县| 华亭县| 乌兰察布市| 武定县| 陆良县|