用jquery显示/隐藏内容

我使用jqZoom从选定的缩略图图像中交换主图像，但我也想切换一些内容div。所以当我点击第一个缩略图时，它将交换放大的大图像，并显示div id =“one”的内容。同样，点击缩略图其中2交换用jquery显示/隐藏内容

<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>

来源

2011-12-22 doubleplusgood

您可以选择缩略图的链接，并添加一些显示/隐藏逻辑到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>

来源

2011-12-22 23:16:33 Jasper

谢谢你。只是得到一个错误，如下所示：Object [object Object]没有方法'on' – doubleplusgood 2011-12-23 09:24:22

@Arpanet'.on（）'在jQuery 1.7中是新的，在这种情况下与'.bind（）'相同，对不起，我正常把这个通知放在答案上。 – Jasper 2011-12-23 16:11:05

用jquery显示/隐藏内容

回答

相关问题