Javascript 如何使图像库在单击文本时显示

我正在重新设计一个家具网站。在某一页上，我会有我的“库存”目录。我想做的是在页面上列出家具类别，例如：

<li> Beds </li> 
<li> Sofas </li> 
<li> Chairs </li> 
<!-- more options... -->

床位
沙发
椅子

当你点击说出单词

Beds

时，屏幕上将展开一个床的图像库。然后，如果客户希望下一步查看

沙发

多媒体资料，我希望能够“隐藏”此多媒体资料

它不需要任何想象，只是一个简单的基本结构。希望这是有意义的。非常感谢您的帮助

$（'.beds'）。在（“单击”，函数（）上）{
//展示各自的画廊
警报（“显示床库”）
});
$（'.sofas'）。打开（“单击”，函数（）{
//展示各自的画廊
警报（“显示沙发库”）
});
$（'.chairs'）。打开（“单击”，函数（）{
//展示各自的画廊
警报（“展示椅子库”）
});


床
沙发
椅子
vinayakj的压缩方式，可处理任意数量的列表项

HTML

<ul id="furnitures">
  <li rel="beds">Beds</li>
  <li rel="sofas">Sofas</li>
  <li rel="chairs">Chairs</li>
</ul>
<div id="gallery-beds" class="gallery">Beds gallery</div>
<div id="gallery-sofas" class="gallery">Sofas gallery</div>
<div id="gallery-chairs" class="gallery">Chairs gallery</div>

**JS**

$().ready(function() {
    $('#furnitures li[rel]').click(function() {
        $('.gallery').hide();
        $('#gallery-'+$(this).attr('rel')).show();
    });
});

请参阅。
您能展示您尝试过的内容吗？有许多图库弹出插件可用。。。如果你正在更新一个网站，那么他们可能已经在使用你可以使用的东西了。想到Joomla，jQueryUI也可能是它。了解他们正在使用的ui库并查找gallery这很好，谢谢，那么我应该如何以及在哪里放置图像库？无论你想在哪里放置图像库，你只需在各自的列表项中单击显示和隐藏即可。抱歉，我仍然不明白。。我真的需要外行术语的答案请分享你正在使用哪个图库插件的代码
$().ready(function() {
    $('#furnitures li[rel]').click(function() {
        $('.gallery').hide();
        $('#gallery-'+$(this).attr('rel')).show();
    });
});