Show/Hide content with jquery
Question
I'm using jqZoom to swap a main image from selected thumbnail images, but I would also like to toggle some content divs. So when I click on the first thumbnail, it will swap the big image that will have the zoom and also show the content of div id="one". Similarly, clicking thumbnail two would swap
<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>
1 answers
solution1
1 ACCPTED 2011-12-22 23:16:33
You can select the thumbnail links and add some show/hide logic to a click event handler for the elements:
$('#thumblist').find('a').on('click', function () {
$('.description').hide().filter('#' + $(this).attr('data-description')).show();
});
This code requires that you add the .description class to each of your description DIVs and that you add the data-description attribute to each thumbnail link, this attribute needs to be set to the ID of the description you want to associate with the link.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.