3 つの非常に優れた簡潔なタブ ナビゲーション (Web ページのタブ)_JavaScript スキルの簡単な分析

Web ページにタブを適用すると、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> ="setTab(0,3)">コメント</li>
</ul>
<ul class = "ブロック">

ニュース一覧

• コメント一覧
  
  < ;li>テクノロジー リスト</li></ul>
  <ul><li>コメント リスト</li></ul>
  </div> div>
  
  
  2 番目の形式: この構造はより複雑です。外部に相対レイヤー (.menu1box) を追加し、オーバーフローの非表示を設定し、タブ (#menu1) を設定します。絶対位置を指定するには、レイヤーを設定します。 1 へのポインタ (z-index:1;) を、下のメイン ボックス (.main1box) を 1px カバーするように設定します。メイン ブロックの境界線を 1 ピクセルの黒い境界線に設定し、上部マージン (margin-top) を -1 ピクセルに設定して、上部の境界線がタブの下に広がるようにします。タブ項目（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>


JS コードの 1 番目と 2 番目の形式:




コードをコピー

コードは次のとおりです:

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[i].className=i==n?"hover":"" ; /*タブの LI オブジェクトのスタイルを変更します（選択された項目の場合は、.hover スタイルを使用します*/

mli[i].style.display=i==n?"block":" none"; /*メインエリアに表示するオブジェクトを決定*/

}
}


3 番目の形式: これも一般的な方法ではありません。相対レイヤー (.menu2box) を追加し、背景レイヤー (#tip2) を使用して配置し、レイヤーの左の距離 (left) を変更することで効果を実現します。

コードをコピー コードは次のとおりです:

<div id="tabs2"> ;
<div class="menu2box">
<div id="tip2"></div>

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 class="main" id="main2"> 🎜></div>

シンプルタブ <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title> </title> <style type="text/css"> <!-- body,div,ul,li{ margin:0 auto; padding:0; } body{ font:12px "瀹</style>