Question

我目前正在处理/历史记录页面。＃my-slideshow包含ul＆lt; li's＆lt;可通过next和prev箭头滚动的主要图像（使用basic-slider.com）。在＃my-slideshow下面，我有一个水平时间轴，每个十年1960年，70年代，80年代等作为一个图像设置为锚点。水平时间轴下方的div有一个通过我们的cms运行的图库小部件，并使用灯箱将图像缩略图显示到对应的年份。

我希望根据您点击的年份更改＃my-slideshow图片和图库窗口小部件图片。我不确定.hide / .show函数是否可以解决这个问题。非常感谢您的所有帮助，并提前感谢您。代码如下。

<div id="slider">
<div id="my-slideshow" style="height: 500px; width: 500px; margin-top: -23px;">
   <ul class="bjqs 1960 div1">
        <li>
            <img src="/images/test-image.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-2.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-3.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-4.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-5.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-6.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-7.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-8.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-9.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1960-banner-10.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
      </div>
    </ul>
        <a class="showimages" target="1"><img class="year" src="/images/1960-a.jpg" style="margin-left:60px;" /></a><br /><br /><br />
     <div class="1960 div1">
     $GALLERY_1$
     </div>
<ul class="bjqs 1960 div2">
        <li>
            <img src="/images/about/1970-banner.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        <li>
            <img src="/images/about/1970-banner-2.jpg" style="width: 752px; height: 500px;margin-left:60px;" /></li>
        </div>
    </ul>
        <a class="showimages" target="2"><img class="year" src="/images/1960-a.jpg" style="margin-left:60px;" /></a><br /><br /><br />
     <div class="1960 div2">
     $GALLERY_2$
     </div>
</div>

脚本

jQuery(function(){
    jQuery('.showimages').click(function(){
          jQuery('.1960').hide();
          jQuery('.div'+$(this).attr('target')).show();
    });
});

在照片库中隐藏和显示Div

0 个答案: