我创建了一个简单的界面,左侧是选项卡,右侧是滑动的图像。我很难弄清楚如何隐藏旧图像(存储在 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>