0

次のFIDDLEは、現在のマークアップを示しています。

HTML

<div class="popup-inner-content main-content">          
    <div class="inner-section one">
        <!-- images -->
        <div class="media pull-left">
            <img src="#" />
        </div>

        <!-- text -->
        <div class="media-aside pull-right">
            <h4>Head</h4>
            <p>Body</p>
        </div>
    </div>

    <div class="inner-section three is-hidden">
        <!-- images -->
        <div class="media pull-left">
            <img src="#" />
        </div>

        <!-- text -->
        <div class="media-aside pull-right is-hidden">
            <h4>Head</h4>
            <p>Body</p>
        </div>
    </div>

    <div class="inner-section two is-hidden">
        <!-- images -->
        <div class="media pull-left ">
            <img src="#" />
        </div>

        <!-- text -->                       
        <div class="media-aside pull-right">
            <h4>Head</h4>
            <p>Body</p>
        </div>                          
    </div>

    <div class="thumbnail pull-left">
        <!-- thumbnail -->
        <div class="media-thumb one">
            <img src="#" alt="media-thumbnail" title="media-thumbnail" />
            <p><a href="#">Anchot text</a></p>
        </div>
    </div>

    <div class="thumbnail pull-left">   
        <!-- thumbnail -->
        <div class="media-thumb two pull-left">
            <img src="#" alt="media-thumbnail" title="media-thumbnail" />
            <p><a href="#">Anchor text</a></p>
        </div>
    </div>

    <div class="thumbnail is-hidden">
        <!-- thumbnail -->
        <div class="media-thumb three ">
            <img src="#" width="128" height="69" alt="media-thumbnail" title="media-thumbnail" />
            <p><a href="#">Anchor Text</a></p>
        </div>
    </div>

    </div>
</div>

私がやろうとしているのは、常に 2 つのサムネイル div と、一度に表示される内部セクション div の 1 つだけを持ち、基本的に、サムネイル div 内のアンカーのいずれかをクリックすると、内部セクションとサムネイル div を切り替えることができることです。

jqueryを使用してこれを達成するにはどうすればよいですか?

4

2 に答える 2

0

これを使用してください: http://jsfiddle.net/nHXEs/6/

function displayItem(showItem) {
  $('div.thumbnail').show();
  $('div.thumbnail .' + showItem).parent().hide();

  $('div.inner-section').hide();
  $('div.inner-section').filter('.' + showItem).show();
}

$(document).ready(function() {
    displayItem('one');

    $('div.thumbnail').click(function () {
      var showItem = '';
      if ($('.media-thumb', $(this)).hasClass('one')) {
          showItem = 'one';
      } else if ($('.media-thumb', $(this)).hasClass('two')) {
          showItem = 'two';
      } else {
          showItem = 'three';
      }

      displayItem(showItem);
    });
});

それがあなたが探しているものであることを願っています。しかし、私はそう願っています。

クラスを使用してアイテムを識別するため、これは最善の解決策ではありませんが、常に正確に 3 つのサンプと大きな要素がある場合は機能します。

より良い解決策は、id を使用して要素を識別することです。

<div class="thumbnail" id="thump_three">
于 2013-01-13T14:56:26.307 に答える
0

どの 2 つのサムネイルを表示するかを決定する方法のロジックについては説明していませんが、トグルの意味を理解するための良い出発点として、それを展開できるようにする必要があります。これにより、各要素が 1 つだけ表示されます。

アイデアは、JS が「1」、「2」、「3」などについて知る必要がなく、無限のオプションに対して機能するということです。

<p><a href="#one">Anchor text</a></p>

クラスを見つけてから、「1」、「2」、「3」などになるクラスを見つけるのは、より多くの作業になるため、使用できる参照をアンカーに与えます。

これは数行で実行できますが、何が起こっているのかを明確にしました。

$('.thumbnail  a').on('click', function(e){
    e.preventDefault();

    // find the wrapper (.thumbnail) and hide it
    var $wrapper=$(this).closest('.thumbnail');
    $wrapper.hide();

    // find the next one
    var $next=$wrapper.next();
    // if this was the last one get the first instead
    if (!$next.length) $next=$wrapper.siblings().filter(':first');

    // show it
    $next.show();

    // now deal with the element that's elsewhere
    var ref=this.href.replace('#','');

    $('.inner-section.' + ref).show().siblings().hide();

});

この動作を設定したら、再度コードを書き出す (または関数を定義する必要がある) 手間を省くために、最後の要素のアンカーをクリックするだけで、最初の要素が表示されます。

$('.thumbnail:last a').trigger('click');
于 2013-01-13T16:28:37.203 に答える