Question

我创建了一个简单的界面，左侧是Tabs，右侧是滑动的图像。我很难弄清楚如何隐藏旧图像（存储在div中）并以干净的方式显示新图像。我在下面发布了HTML和jQuery。任何想法将不胜感激

 var resource_box = $('.resource-box')
  resource_box.find('div').not('.selected').each(function(){
    $(this).css('display', 'none'); // Hides all the Content for Each UL
  });

  var tabs = $('.names ul');
  $('.names ul li').click(function () {
      tabs.find('li').each(function(){
        $(this).removeClass('selected')
      });
    $(this).addClass('selected');
    var tabId = $(this).attr('id');
    $('.resource_box').find(tabId)


  });

<div class="container gallery-container">

      <div class="names">
        <ul>
          <li id="vector-icon-packs" class="selected">Vector Icon Packs</li>
          <li id="user-interface-kit">User Interface Kits</li>
          <li id="vector-illustrations">Vector Illustrations</li>
          <li id="high-res-textures">High-Res Textures</li>
          <li id="premium-brushes">Premium Brushes</li>
          <li id="print-templates">Print Templates</li>
          <li id="mockups">Mockups</li>
        </ul>
      </div>
      <div class="grid items resource-box">
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="vector-icon-packs" class="selected"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="user-interface-kit"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="vector-illustrations"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="high-res-textures"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="premium-brushes"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="print-templates"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="mockups"></div>
      </div>
    </div>

Answer 1

您的元素共享ID，这是不允许的，请尝试：

$('.names ul li').click(function(){
  $('.resource-box div').hide();                      // hides all divs
  $('.resource-box div').eq($(this).index()).show();  // shows correct one
});

代码的关键部分是eq($(this).index())，它抓取index（列表项的子号），然后使用它来决定显示哪个div。当然，这意味着它们必须处于相同的顺序

隐藏和显示Jquery中的选项卡

1 个答案: