Question

我正在重新设计一个家具网站。在一个特定的页面上，我将获得我的“股票”目录。我想要发生的是在页面上显示的家具类别列表，例如

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

当您点击单词Beds时，会在屏幕上展开床的图像库。然后我希望能够“隐藏”这个画廊，如果说顾客想要旁边看Sofas画廊。

它不一定要花哨，只是一个简单的基本结构。希望这是有道理的。非常感谢任何帮助！

Answer 1

$('.beds').on("click", function(){

  //show respective gallery
  alert('show beds gallery')

});

$('.sofas').on("click", function(){
     //show respective gallery
  alert('show sofas gallery')

});

$('.chairs').on("click", function(){
    //show respective gallery
  alert('show chairs gallery')
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="furnitures">
  <li class="beds">Beds</li>
  <li class="sofas">Sofas</li>
  <li class="chairs">Chairs</li>
</ul>

Answer 2

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>

<强> CSS

.gallery {
  display: none;
}

** JS **

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

请参阅fiddle。

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

2 个答案: