隱藏和顯示Jquery中的標籤

我已經創建了一個簡單的界面，其中左側的Tabs和右側的圖像是滑動的。我很難弄清楚如何隱藏舊圖像（存儲在div中）並以乾淨的方式顯示新圖像。我已經發布了下面的HTML和jQuery。任何想法，將不勝感激隱藏和顯示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>

來源

2013-06-11 rigelstpierre

你的元素份額的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。當然，這意味着它們必須是相同的順序

來源

2013-06-11 16:23:59 Andy

你也可以在選定的元素上鍊接方法來提高性能 - '$（'。resource-box div'）。hide（）。eq（$（this）。的.index（））顯示（）;' – Shaddow

隱藏和顯示Jquery中的標籤

回答

相關問題