加入收藏RSS訂閱SEO教程 SEO優化 SEO自學 網站優化
你的位置:首頁 ? 信息技術 ? 正文

三種簡潔的經典高效的DIV+CSS制作的Tab導航簡析!

選擇字號: 超大 標準 發布時間:2014-9-9 10:53:20 | 作者:Searcheo | 0個評論 | 人瀏覽

本文地址:http://www.umpuhz.live/post/321.html 轉載請注明出處!

在網頁中應用選項卡可以使網頁顯得更緊湊,結合AJAX技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹幾種簡潔的選項卡效果的實現(不涉及滑動門和AJAX),附有實例,無圖片,兼容性較好,方便大家直接使用。
第一種形式: 通過更換顯示樣式實現,這種很常見,就不多說了。

Css代碼  
  1. <div id="tabs0">  

  2. <ul class="menu0" id="menu0">  

  3.   <li onclick="setTab(0,0)" class="hover">新聞</li>  

  4.   <li onclick="setTab(0,1)">評論</li>  

  5.   <li onclick="setTab(0,2)">技術</li>  

  6.   <li onclick="setTab(0,3)">點評</li>  

  7. </ul>  

  8. <div class="main" id="main0">  

  9.   <ul class="block"><li>新聞列表</li></ul>  

  10.   <ul><li>評論列表</li></ul>  

  11.   <ul><li>技術列表</li></ul>  

  12.   <ul><li>點評列表</li></ul>  

  13. </div>  

  14. </div>  


第二種形式: 這種結構比較復雜一些,外面加一個相對層(.menu1box),設置溢出隱藏,將選項卡(#menu1)設為絕對定位,設置層指針為1(z- index:1;),以便可以遮住下主區塊(.main1box)1px的高度。設置主區塊的邊框為1px的黑邊,上空白(margin-top)為 -1px,使上邊框伸到選項卡下。當改變選項卡某項(li)的背景為白色時便可遮住一部分主區塊的上邊框。這樣效果就實現了。

Css代碼  
  1. <div id="tabs1">  

  2. <div class="menu1box">  

  3.   <ul id="menu1">  

  4.    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新聞</a></li>  

  5.    <li onmouseover="setTab(1,1)"><a href="#">評論</a></li>  

  6.    <li onmouseover="setTab(1,2)"><a href="#">技術</a></li>  

  7.    <li onmouseover="setTab(1,3)"><a href="#">點評</a></li>  

  8.   </ul>  

  9. </div>  

  10. <div class="main1box">  

  11.   <div class="main" id="main1">  

  12.    <ul class="block"><li>新聞列表</li></ul>  

  13.    <ul><li>評論列表</li></ul>  

  14.    <ul><li>技術列表</li></ul>  

  15.    <ul><li>點評列表</li></ul>  

  16.   </div>  

  17. </div>  

  18. </div>  


第一、二種形式的JS代碼:

Js代碼  
  1. function setTab(m,n){  

  2. var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*獲取選項卡的LI對象*/  

  3. var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*獲取主顯示區域對象*/  

  4. for(i=0;i<tli.length;i++){  

  5.   tli[i].className=i==n?"hover":""; /*更改選項卡的LI對象的樣式,如果是選定的項則使用.hover樣式*/  

  6.   mli[i].style.display=i==n?"block":"none"; /*確定主區域顯示哪一個對象*/  

  7. }  

  8. }  


第三種形式: 這也是一種不常用的方式,加一個相對層(.menu2box),利用一個背景層(#tip2)定位,通過改變層的左距離(left)實現效果。

Css代碼  
  1. <div id="tabs2">  

  2. <div class="menu2box">  

  3.   <div id="tip2"></div>  

  4.   <ul id="menu2">  

  5.    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新聞</a></li>  

  6.    <li onmouseover="nowtab(2,1)"><a href="#">評論</a></li>  

  7.    <li onmouseover="nowtab(2,2)"><a href="#">技術</a></li>  

  8.    <li onmouseover="nowtab(2,3)"><a href="#">點評</a></li>  

  9.   </ul>  

  10. </div>  

  11.   <div class="main" id="main2">  

新聞內容
</div>
</div>


標簽:  

SEO教程網

猜你喜歡

發表評論

必填

選填

選填

必填,不填不讓過哦,嘻嘻。

記住我,下次回復時不用重新輸入個人信息

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

站長推薦的文章
瀏覽最多的文章
無覓相關文章插件,快速提升流量 体彩app官方网站