非常に良い3つのシンプルなTabナビゲーション（Webタブ）簡単な分析

ページの中でタブを使うと、ホームページがよりコンパクトになります。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>

第二の形態： このような構造はやや複雑で、外側に相対層(.menu1 box)を追加し、オーバーフロー隠しを設定し、タブ(zhi menu 1)を絶対位置に設定し、層ポインタを1(z-indx:1)、メインブロック（.main 1 box）の1 pxの高さを隠すことができます。メインブロックの枠を1 pxの黒辺に設定し、上余白を-1 pxとして、上縁をタブの下に伸ばします。タブのある項目（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"; /*            */ 
} 
}

第三の形式： これは一般的ではない方法であり、相対層(.menu 2 box)を加えて、背景層を利用して位置を定め、層の左距離を変えることで効果が得られます。

<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>

<！/*第一の形態は、第二の形式で表示スタイル*/function setTab(m，n)｛var tli=document.getElementById("menu"+m).getElements ByTagName(li")；var mli=document.getElemenntById（「main」＋m）.getElements ByTagName（「ul」）；for(i=0;i<！--第一の形態--<

＜div class=”main“id=”main 0"<

block">
• ニュースリスト

コメントリスト＜li＞＜li＞＜ul＞＜li＞技術リスト＜li＞技術一覧＜li＞＜li＞＜li＞＜li＞＜li＞リスト＞＜li＞＜li＞Diul＞＜li＞＜li＞＞＞＞＜diul＞＞＞＞＞＜li＞＞＞Diul＞＞＞＞＞Diul＞Diul＜li＞Diul＞Diul＞＞＞＞＞＞第二の形式--<>

• 夬“コメント

man1 box"""""

ニュースリスト/li>

• リスト
  >>>リスト<
  • >>>>>>>>>>>リスト