Показать/скрыть содержимое с помощью jquery

Я использую jqZoom для замены основного изображения из выбранных уменьшенных изображений, но я также хотел бы переключить некоторые div div. Поэтому, когда я нажимаю на первый миниатюру, он будет менять большое изображение, которое будет иметь масштаб, а также отображать содержимое div id = "one". Точно так же, нажав эскиз два будет поменятьПоказать/скрыть содержимое с помощью 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 к каждой миниатюрной ссылке, для этого атрибута должен быть установлен идентификатор описания, которое вы хотите связать со ссылкой.

<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

@Arpanet '.on()' является новым в jQuery 1.7 и в этом случае является таким же, как '.bind()', извините, я обычно поставьте это уведомление на ответы. – Jasper

Показать/скрыть содержимое с помощью jquery

ответ

Смежные вопросы