コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 3 つの非常に優れた簡潔なタブ ナビゲーション (Web ページのタブ)_JavaScript スキルの簡単な分析

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

WBOY
リリース： 2016-05-16 19:09:10
オリジナル
1503 人が閲覧しました

Web ページにタブを適用すると、Web ページがよりコンパクトに表示され、AJAX テクノロジと組み合わせることで、限られたスペースでより多くのコンテンツをページに表示できるようになります。この記事では主に、いくつかの単純なタブ効果 (スライディング ドアや AJAX を含まない) の実装を例とともに紹介します。画像はありませんが、互換性が高く、誰もが直接使用するのに便利です。

最初の形式: 表示スタイルを変更することで実現されます。これは非常に一般的なため、詳細は説明しません。

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


  • ニュース一覧
    • コメント一覧
        < ;li>テクノロジー リスト

      • コメント リスト

div>


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




li class= "hover" onmouseover="nowtab(2,0)">ニュース
  • コメント

  • テクノロジー

  • コメント< / li>

    🎜>






    • 前の記事：超強力なIE背景画像のちらつき(カクカク)の解決_JavaScriptスキル 次の記事：IE_javascriptスキルに表示されないFlash起動ボックスのjs実装方法の小発見
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    3
    2229
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    11
    2372
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1984
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1869
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1939
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート