推薦三種簡潔的Tab導航(網頁選項卡)簡析_經驗交流

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

<div id="tabs0">  <ul class="menu0" id="menu0">    <li onclick="setTab(0,0)" class="hover">新聞</li>    <li onclick="setTab(0,1)">評論</li>    <li onclick="setTab(0,2)">技術</li>    <li onclick="setTab(0,3)">點評</li>  </ul>  <div class="main" id="main0">    <ul class="block"><li>新聞列表</li></ul>    <ul><li>評論列表</li></ul>    <ul><li>技術列表</li></ul>    <ul><li>點評列表</li></ul>  </div>  </div>



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

<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="#">評論</a></li>     <li onmouseover="setTab(1,2)"><a href="#">技術</a></li>     <li onmouseover="setTab(1,3)"><a href="#">點評</a></li>    </ul>  </div>  <div class="main1box">    <div class="main" id="main1">     <ul class="block"><li>新聞列表</li></ul>     <ul><li>評論列表</li></ul>     <ul><li>技術列表</li></ul>     <ul><li>點評列表</li></ul>    </div>  </div>  </div>


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

function setTab(m,n){  var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*擷取選項卡的LI對象*/  var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*擷取主顯示地區對象*/  for(i=0;i<tli.length;i++){    tli[i].className=i==n?"hover":""; /*更改選項卡的LI對象的樣式,如果是選定的項則使用.hover樣式*/    mli[i].style.display=i==n?"block":"none"; /*確定主地區顯示哪一個對象*/  }  }

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

<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="#">評論</a></li>     <li onmouseover="nowtab(2,2)"><a href="#">技術</a></li>     <li onmouseover="nowtab(2,3)"><a href="#">點評</a></li>    </ul>  </div>    <div class="main" id="main2">  新聞內容  </div>  </div>

效果示範:

<!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>簡潔Tab</title> <style type="text/css"> <!-- body,div,ul,li{  margin:0 auto;  padding:0; } body{  font:12px "宋體";  text-align:center; } a:link{  color:#00F;  text-decoration:none; } a:visited {  color: #00F;  text-decoration:none; } a:hover {  color: #c00;  text-decoration:underline; } ul{  list-style:none; } .main{  clear:both;  padding:8px;  text-align:center; } /*第一種形式*/ #tabs0 {  height: 200px;  width: 400px;  border: 1px solid #cbcbcb;  background-color: #f2f6fb; } .menu0{  width: 400px; } .menu0 li{  display:block;  float: left;  padding: 4px 0;  width:100px;  text-align: center;  cursor:pointer;  background: #FFFFff; } .menu0 li.hover{  background: #f2f6fb; } #main0 ul{  display: none; } #main0 ul.block{  display: block; } /*第二種形式*/ #tabs1{  text-align:left;  width:400px; } .menu1box{  position:relative;  overflow:hidden;  height:22px;  width:400px;  text-align:left; } #menu1{  position:absolute;  top:0;  left:0;  z-index:1; } #menu1 li{  float:left;  display:block;  cursor:pointer;  width:72px;  text-align:center;  line-height:21px;  height:21px; } #menu1 li.hover{  background:#fff;  border-left:1px solid #333;  border-top:1px solid #333;  border-right:1px solid #333; } .main1box{  clear:both;  margin-top:-1px;  border:1px solid #333;  height:181px;  width:400px; } #main1 ul{  display: none; } #main1 ul.block{  display: block; } /*第三種形式*/ .menu2box{  position:relative;  overflow:hidden;  height:22px;  width:400px;  text-align:left;  background: #FFFFff; } #tabs2 {  height: 200px;  width: 400px;  border: 1px solid #cbcbcb;  background-color: #f2f6fb; } #tip2{  position:absolute;  top:0;  left:0;  height:22px;  line-height:22px;  z-index:0;  width:100px;  background: #f2f6fb; } #menu2{  position:absolute;  top:0;  left:0;  z-index:1; } #menu2 li{  display:block;  float: left;  padding: 4px 0;  width:100px;  text-align: center;  cursor:pointer; } --> </style> <script> <!-- /*第一種形式 第二種形式 更換顯示樣式*/ function setTab(m,n){  var tli=document.getElementById("menu"+m).getElementsByTagName("li");  var mli=document.getElementById("main"+m).getElementsByTagName("ul");  for(i=0;i<tli.length;i++){   tli[i].className=i==n?"hover":"";   mli[i].style.display=i==n?"block":"none";  } } /*第三種形式 利用一個背景層定位*/ var m3={0:"",1:"評論內容",2:"技術內容",3:"點評內容"} function nowtab(m,n){  if(n!=0&&m3=="")m3=document.getElementById("main2").innerHTML;  document.getElementById("tip"+m).style.left=n*100+'px';  document.getElementById("main2").innerHTML=m3[n]; } //--> </script> </head> <body>   <!--第一種形式--> <div id="tabs0">  <ul class="menu0" id="menu0">   <li onclick="setTab(0,0)" class="hover">新聞</li>   <li onclick="setTab(0,1)">評論</li>   <li onclick="setTab(0,2)">技術</li>   <li onclick="setTab(0,3)">點評</li>  </ul>  <div class="main" id="main0">   <ul class="block"><li>新聞列表</li></ul>   <ul><li>評論列表</li></ul>   <ul><li>技術列表</li></ul>   <ul><li>點評列表</li></ul>  </div> </div> <!--第二種形式--> <div id="tabs1">  <div class="menu1box">   <ul id="menu1">    <li class="hover" onmouseover="setTab(1,0)">新聞</li>    <li onmouseover="setTab(1,1)">評論</li>    <li onmouseover="setTab(1,2)">技術</li>    <li onmouseover="setTab(1,3)">點評</li>   </ul>  </div>  <div class="main1box">   <div class="main" id="main1">    <ul class="block"><li>新聞列表</li></ul>    <ul><li>評論列表</li></ul>    <ul><li>技術列表</li></ul>    <ul><li>點評列表</li></ul>   </div>  </div> </div>   <!--第三種形式--> <div id="tabs2">  <div class="menu2box">   <div id="tip2"></div>   <ul id="menu2">    <li class="hover" onmouseover="nowtab(2,0)">新聞</li>    <li onmouseover="nowtab(2,1)">評論</li>    <li onmouseover="nowtab(2,2)">技術</li>    <li onmouseover="nowtab(2,3)">點評</li>   </ul>  </div>   <div class="main" id="main2"> 新聞內容  </div> </div> </body> </html>

以上就是推薦三種簡潔的Tab導航(網頁選項卡)簡析_經驗交流的內容,更多相關內容請關注topic.alibabacloud.com(www.php.cn)!

  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.