Question

我想创建一个包含3个选项（2013年，2005年，2004年）的框，这些选项都链接到他们自己的单独的jquery滑块图像库。我想要它，以便当您单击2013时，显示2013图库，然后当您单击2005时，将显示2005图库。

我不知道我是否应该使用＆＃39;点击事件监听器＆＃39;或者只是使用html。我是编码的新手，并会非常感谢帮助。感谢。

Answer 1

实施例： jsFiddle

如果您使用第三部分插件来提供图库功能，您可以通过以下方式解决问题：

创建第二个容器框，并将3个不同的图库放入容器中，但隐藏。

示例：

<div class="select-gallery">
 <ul>
  <li data="gallery1">2013</li> <!-- the data attribute links the list element to it's related gallery -->
  <li data="gallery2">2005</li>
  <li data="gallery3">2004</li>
 </ul>
</div>

<div class="gallery-container">
 <ul id="gallery1" class="is-hidden gallery">[...]</ul>
 <ul id="gallery2" class="is-hidden gallery">[...]</ul>
 <ul id="gallery3" class="is-hidden gallery">[...]</ul>
</div>

然后使用javascript，（我假设您将使用jquery来加速） jQuery Framework，您可以将事件处理程序附加到选择图库列表元素的click事件，以便以这种方式显示您的任何图库：

$(document).ready(function () {
    $(".select-gallery").on("click", "li", function () {
        var $data = $(this).attr("data");
        $(".gallery").css("display", "none");
        $("#" + $data).fadeIn();
    });
});

html中的条件图像库

1 个答案: