15

タブAをクリックするときは、タブAのコンテンツを表示します。タブBをクリックし、タブBのコンテンツを表示します。

HTMLスニペットを作成する最も簡単で互換性のある方法は何ですか？

ここでライブラリを使用するつもりはないので、jQueryやその他のライブラリは使用しません。

4

9 に答える 9

30

独自のタブコントロールをロールしたい場合は、次のようにすることができます。

<html>
  <head>
    <script type="text/javascript">

      function activateTab(pageId) {
          var tabCtrl = document.getElementById('tabCtrl');
          var pageToActivate = document.getElementById(pageId);
          for (var i = 0; i < tabCtrl.childNodes.length; i++) {
              var node = tabCtrl.childNodes[i];
              if (node.nodeType == 1) { /* Element */
                  node.style.display = (node == pageToActivate) ? 'block' : 'none';
              }
          }
      }

    </script>
  </head>
  <body>
    <ul>
      <li>
        <a href="javascript:activateTab('page1')">Tab 1</a>
      </li>
      <li>
        <a href="javascript:activateTab('page2')">Tab 2</a>
      </li>
      ...
    </ul>
    <div id="tabCtrl">
      <div id="page1" style="display: block;">Page 1</div>
      <div id="page2" style="display: none;">Page 2</div>
      ...
    </div>
  </body>
</html>
于 2009-06-22T20:31:20.700 に答える
3

これは、さまざまなタイプのタブのリストと、それらを作成する方法のチュートリアルです。

于 2009-06-22T14:59:50.483 に答える
2

TabTasticは優れたガイドです—アクセス可能であり、（JavaScriptが利用できない場合）非常に正常に失敗します。

于 2009-06-22T16:04:28.143 に答える
2

独自のタブビューを実装する場合は、次のようにします。

<html>
    <head>
        <style>
            .tab {
            display:none;
            }
        </style>

        <script type="text/javascript">
          function initTabView(){
            var x = document.getElementsByClassName('tab-view')
            for(var i=0; i < x.length; i++) {
              x[i].onclick = displayTab;
            }

            var prevViewedTab = null;

            function displayTab(e) {
            var idOfTabToDisplay = this.getAttribute("data-tab")

            if(prevViewedTab) {
              prevViewedTab.style.display = 'none';
            }

            var tabToDisplay = document.getElementById(idOfTabToDisplay);
              tabToDisplay.style.display = 'block';
              prevViewedTab = tabToDisplay;
            }

            var defaultTab = document.getElementsByClassName('default-tab')
              if (defaultTab.length) {
                defaultTab[0].style.display = 'block';
                prevViewedTab = defaultTab[0];
              }
          }
        </script>
    </head>

    <body>
        <ul>
            <li>
                <a data-tab="tab1" class="tab-view">Tab 1</a>
            </li>
            <li>
                <a data-tab="tab2" class="tab-view">Tab 2</a>
            </li>
            <li>
                <a data-tab="tab3" class="tab-view">Tab 3</a>
            </li>
            <li>
                <a data-tab="tab4" class="tab-view">Tab 4</a>
            </li>
        </ul>
        <div id="tabCtrl">
            <div class="tab default-tab" id="tab1">This is Tab 1</div>
            <div class="tab" id="tab2">This is Tab 2</div>
            <div class="tab" id="tab3">This is Tab 3</div>
            <div class="tab" id="tab4">This is Tab 4</div>
        </div>

        <script>
            initTabView();
        </script>
    </body>
</html>

jsFiddleはここから入手できます。

于 2013-08-14T06:39:13.667 に答える
1

このような例を見てください（「タブ付きビューjavascript」のGoogle検索の礼儀）。

少しカスタマイズしてこれを使用できることは明らかですが、分解して何をしているのかを判断することは有益です。基本的には、スタイルを<div>使用して有効または無効にし、またはに設定しますdisplayblocknone

于 2009-06-22T14:58:03.967 に答える
0

jQuery UIのタブウィジェットは使いやすいです：http：//jqueryui.com/demos/tabs/。

jQueryタブウィジェットはブラウザ側で完全に機能します。すべてのタブのコンテンツはリクエストごとに送信されます。または、Ajaxを使用してタブのコンテンツを動的に読み込むJavaScriptコードを記述できます。

ただし、使用には適さない場合があります。サーバー側でタブを制御する必要があるかどうかを検討してください（つまり、タブをクリックすると、新しいページ要求がサーバーに送信されます。サーバーは、タブの外観を持つHTMLを構築します）。

于 2009-06-22T14:57:33.217 に答える
0

JavaScriptを使用することに慣れている場合は、jQueryのタブが非常に便利です。

于 2009-06-22T14:57:56.010 に答える
0

「シンプルで互換性がある」が2つの基準しかない場合は、jQueryUITabsプラグインをお勧めします。クロスブラウザ、および実装するための簡単な操作。

于 2009-06-22T14:58:14.417 に答える
0

野心によっては、順序付けられていないリストと<div>s（タブの内容）の数の問題である可能性があります。次に、単純なJavaScriptで、現在のすべてを除くすべてのs：getElementById()のdisplayプロパティを設定できます。<div>none

または、これを確認することもできます。

編集：jQueryサイトにリンクしているのは1つだけではないようです:)

于 2009-06-22T14:58:48.317 に答える