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>

我想要做的是始终有两个缩略图 div，一次只有一个内部 div 可见，并且在单击缩略图 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`s 来识别元素

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

您还没有解释如何决定要显示哪两个缩略图的逻辑，但这是一个很好的起点，我相信您的意思是通过切换应该允许您扩展它。这将只显示每个元素之一。

这个想法是 JS 不需要知道“一”、“二”、“三”等，而只需为无限数量的选项工作。

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

给锚一个你可以使用的参考，因为找到类然后计算出“一”、“二”、“三”等将是更多的工作。

您可以在几行代码中完成此操作，但我已经清楚地说明了发生了什么。

$('.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 回答