用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顯示/隱藏內容

回答

相關問題