在Jquery中隱藏和顯示選項卡

Question

我創建了一個簡單的界面，左側是標簽頁，右側是圖像。 我很難弄清楚如何隱藏舊圖像（存儲在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()) ，它獲取索引 （列表項的子級為多少），然后使用該索引確定要顯示的div。 當然，這意味着它們必須處於相同的順序