0

いくつかのタブ スクリプトを試しましたが、もっと具体的なものを探していると思います。

基本的に、タブのように div を表示し、他のすべてを非表示にするものが必要です。

これとよく似たもの

http://jsfiddle.net/6UcDR/2/

しかし、ボタン以外のものを使用できるようにしたいです。ギャラリーのように画像を横に並べてセットアップします。ある画像をクリックすると、別の div タグのコンテンツがその真上に表示されます。別の画像をクリックすると、表示されていた画像が非表示になり、別の画像が表示されます。そのjsfiddleデモで行われている方法とほぼ同じです。

ただし、ある種のdiv ID /クラスを使用して画像をコンテンツに接続できるようにしたい...だから

<div id="blahblah"> Related Content Here </div><div id="blahblah"> Image Here </div>

またはこのようなもの

<div id="content123" class="tab_content" style="display: block;"> content here <li class="active"><a href="#content123" rel="episodelist">Episode List</a></li>

これにより、画像 ID などを使用して複数の画像とそのコンテンツを引き出すことができる php ループに簡単に入れることができます。

繰り返しますが、これから作成するリンクまたは画像の上に表示されるコンテンツが必要です。

したがって、次のようになります...

            表示される動的コンテンツ

画像1 画像2 画像3 画像4 画像5

この動的コンテンツは、クリックされた画像に応じて切り替わります。

誰かが助けることができれば、それは素晴らしいことです！

4

3 に答える 3

1

jQuery を学習するとき、ID セレクターは非常に具体的であるため、すべてに ID が必要であることに集中するのは簡単です。ID の各グループに対して複数のシナリオに直面すると、ID の使用はコーディングが複雑になる可能性があります。ただし、ID を使用せずにコードを大幅に簡素化できる他の方法を使用して、さまざまな要素を照合する方法は多数あります。

たとえば、デモとコードのボタンとコンテンツ項目の周りにラッパーを追加するには、次のindex()メソッドを使用して記述できます。

HTML:

<div id="content">
  <div id=a style="display:none">1</diV>
  <div id=b style="display:none">2</diV>
  <div id=c style="display:none">3</diV>
  <div id=d style="display:none">4</diV>
</div>
<div id="button_wrap">
  <input type=button value=1 id=w/>
  <input type=button value=2 id=x/>
  <input type=button value=3 id=y/>
  <input type=button value=4 id=z/>
</div>

JS:

$(function(){
    $('#button_wrap input').click(function(){
      /* hide all content, show item that  matches index of this button*/
      $('#content').children().hide().eq( $(this).index() ).show()
    });
});

同様のアイテムにクラスを追加することも、セレクターにとって大きな助けになります

デモ: http://jsfiddle.net/6UcDR/38/

API リファレンス:

http://api.jquery.com/index/

http://api.jquery.com/eq/

API のさまざまなトラバーサル メソッドと例を調べてください。さまざまなトラバースが何をするかを理解すると、より動的なレイアウトとユーザー インターフェイスを生成するのに役立ちます

于 2013-01-06T13:30:41.577 に答える
0 
$(".contet").each( function() {
  $(this).hide();
});
$(".tab").on("click", function() {
  var s = $(this).attr("id");
  var g = $("#"+s+".contet").html();
  $(".content").html(g);
});

純粋な jQuery でフィドルを操作する

于 2013-01-06T12:52:17.207 に答える
0 
<script src="../../jquery-1.8.0.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.tabs.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Image1</p>
    </div>
    <div id="tabs-2">
        <p>Image2</p>
    </div>
    <div id="tabs-3">
        <p>Image3</p>
    </div>
        <div id="tabs-4">
        <p>Image4</p>
    </div>
 <div id="tabs-5">
        <p>Image5</p>
    </div>

</div>

</div>
于 2013-01-06T13:06:09.583 に答える