Question

我正在使用jqZoom来交换选定缩略图图像中的主图像，但我还想切换一些内容div。因此，当我点击第一个缩略图时，它将交换将具有缩放的大图像，并且还显示div id =“one”的内容。同样，单击缩略图2将交换

<script type="text/javascript">
$(document).ready(function() {
    $('.jqzoom').jqzoom({
            title: false,
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:false
        });

});
</script>
[...]
<body>
<div class="clearfix">
    <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >
        <img src="imgProd/triumph_small1.jpg"  title="triumph"  style="border: 4px solid #666;">
    </a>
</div>
<div id="one" style="display:none;">
    div class one text
</div>
<div id="two" style="display:none;">
    div class two text
</div>
<div id="three" style="display:none;">
    div class three text
</div>
<ul id="thumblist" class="clearfix" >
    <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
    <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
    <li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
</ul>
</body>

Answer 1

您可以选择缩略图链接，并为元素的click事件处理程序添加一些显示/隐藏逻辑：

$('#thumblist').find('a').on('click', function () {
    $('.description').hide().filter('#' + $(this).attr('data-description')).show();
});

此代码要求您将.description类添加到每个描述DIV中，并将data-description属性添加到每个缩略图链接，此属性需要设置为描述的ID你想与链接相关联。

<div class="description" id="one" style="display:none;">
    div class one text
</div>
<div class="description" id="two" style="display:none;">
    div class two text
</div>
<div class="description" id="three" style="display:none;">
    div class three text
</div>


<ul id="thumblist" class="clearfix" >
    <li><a data-description="one"><img /></a></li>
    <li><a data-description="two"><img /></a></li>
    <li><a data-description="three"><img /></a></li>
</ul>

使用jquery显示/隐藏内容

1 个答案: