1

簡単な問題のように見える解決策を誰かが持っているかどうか疑問に思います。

コンテンツボックスの上部を横切るタブの行と、コンテンツボックスの下部を横切る別の行を持つタブボックスを作成しようとしています。

このようなもの：

  <div id="tabContainer">
    <div id="tabs">
      <ul>
        <li id="tabHeader_1">Tab 1</li>
        <li id="tabHeader_2">Tab 2</li>
        <li id="tabHeader_3">Tab 3</li>
      </ul>
    </div>
    <div id="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Page 1</h2>
        <p>Content 1</p>
      </div>
      <div class="tabpage" id="tabpage_2">
        <h2>Page 2</h2>
        <p>Content 2</p>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Page 3</h2>
        <p>Content 3</p>
      </div>
              <div class="tabpage" id="tabpage_4">
        <h2>Page 4</h2>
        <p>Content 4</p>
      </div>
              <div class="tabpage" id="tabpage_5">
        <h2>Page 5</h2>
        <p>Content 5</p>
      </div>
              <div class="tabpage" id="tabpage_6">
        <h2>Page 6</h2>
        <p>Content 6</p>
      </div>
    </div>
          <div id="tabs">
      <ul>
        <li id="tabHeader_4">Tab 4</li>
        <li id="tabHeader_5">Tab 5</li>
        <li id="tabHeader_6">Tab 6</li>
      </ul>
    </div>
  </div>

Muchosは助けてくれる人に感謝します！

4

2 に答える 2

1

まずid、複数の要素で使用することはできませんid。 は一意です。に変更tabs idしますclass。2 つ目: 簡単に操作できるように、li セレクターの ID を次のように変更します。

ここではjsFiddleが動作しています。

html:

   <ul>
        <li id="header_tabpage_1">Tab 1</li>
        <li id="header_tabpage_2">Tab 2</li>
        <li id="header_tabpage_3">Tab 3</li>
   </ul>

jQuery:

$(document).ready(function() {
    $('.tabpage').hide().first().show();

    $('.tabs ul li').click(function() {
       var target = $(this).attr('id').replace('header_','');
       //this will return like 'tabpage_1'

       $('.tabpage').hide();
       $('#'+ target).fadeIn(500);

       $('.tabs ul li').removeClass('selected');
       $(this).addClass('selected');
    });
});
于 2013-01-28T21:35:54.363 に答える
0

#tabs@barlasは、同じページに 2 回存在すると既に述べています。これは許可されていません。クラスを使用してください。

スタイル（CSS）部分に焦点を当てたフィドルは次のとおりです：http://jsfiddle.net/XXhSQ/

タブの行 (上部と下部の両方) とコンテンツは として表示されますtable-row(およびそれらのコンテナーは として表示されますtable)。
それらはまだ意味不明な div です。これらtable-thingsはそれらに適用される視覚的表示アルゴリズムにすぎず、突然テーブルがレイアウトとして使用されるわけではありません (後者はtable、 、 などのtrHTML要素を使用することを意味しますtd)。

タブはマウスでクリック可能で、キーボード (およびタッチも) でフォーカス可能でなければならないため、次にa要素が追加されます。コンテナー ( ) が等幅のセルとして表示される場合、コンテナーの幅全体を占めるように 表示されます。 最後に、いくつかの背景、境界線、およびさまざまな丸みを帯びた境界線が、デモ目的で使用されます。.tabs>li
blockli
tabs-uptabs-down

互換性はIE8+です。IE7 のフォールバックが使用されます.tabs li { display: inline;zoom:1;}(これは IE7 の場合と同等ですdisplay: inline-block。テーブル シングもインライン ブロックも理解していないためです ...)

于 2013-01-28T22:18:04.930 に答える