1

だから私はこれこのレイアウトを持っており、上のリンクがアクティブになっていることに応じて、javascript/jqueryを使用して下のボックスのコンテンツを変更することを計画しています。

これを行う方法を選択する前に、ベスト プラクティスとは何かについていくつかの情報を提供したいと思います。JavaScriptを使用してhtmlコンテンツを変更することに関しては初心者です。特に、最もリソース効率の良い方法でそれを行うことを考慮したい場合。

下のボックスのレイアウトはそれぞれ異なります。各下のボックス レイアウトは、最初から html に存在する必要がありますか? また、ブロック全体を変更する最も簡単な方法として、各レイアウトを div 要素に含める必要があります。ここで私は正しく考えていますか？

どの jQuery 関数を使用する必要がありますか?

4

4 に答える 4

2

jsBinデモ

すべてのDIV.pageを共通のコンテナー内にラップし#pagesます。

<ul id="navigation">
   <li>Link 1</li>
   <li>Link 2</li>
   <li>Link 3</li>
   <li>Link 4</li>
   <li>Link 5</li>
</ul>
<div id="pages">
   <div class="page">Page 1</div>
   <div class="page">Page 2</div>
   <div class="page">Page 3</div>
   <div class="page">Page 4</div>
   <div class="page">Page 5</div>
</div>

クリックしたナビゲーションのインデックスを取得し.pageて、同じインデックスで表示するよりも、次のようになります。

jQuery(function($){
    
   $('.page:gt(0)').hide(); // hide all pages but first

   $('ul#navigation li').click(function(){
      var liIndex = $(this).index();
      $('.page').hide().eq(liIndex).show(); // hide all and show matching page!
   });


});
于 2012-10-01T01:18:33.077 に答える
2

私は最近、似たようなことをしています。私のアドバイスは、jQuery UI のタブ機能を使用することです。ページの各セクションは、必要に応じて表示/非表示を切り替える個別の DIV タグです。これにより、ボタンを押すとすぐにページ全体が読み込まれ、利用可能になります。

jQuery UI タブの詳細については、http: //jqueryui.com/demos/tabs/を参照してください。

于 2012-10-01T01:11:45.363 に答える
1

Bootstrap 自体はタブをサポートしています。あなたのスタイルを保持するには、そのようなコンポーネントに含まれている CSS スタイルを上書きする必要があります。

于 2012-10-01T01:31:49.910 に答える
1

それらがすべて元の HMTL ページにある必要がある場合は、コンテンツの各ブロックを独自の div に配置し、それぞれに独自の id 値を持ち、それぞれに共通のクラス名を付け、CSS を使用してデフォルトですべてを非表示にし、display: nonejavascript を使用します。クリックに基づいて目的のコンテンツ セットのみを表示します。クリックするたびに、それらすべてを非表示にして、表示したいものを表示できます。

于 2012-10-01T01:10:44.170 に答える