jquery로 콘텐츠 표시/숨기기

jqZoom을 사용하여 선택한 축소판 이미지에서 주 이미지를 바꿀 수 있지만 일부 콘텐츠 div를 전환하고 싶습니다. 따라서 첫 번째 축소판을 클릭하면 줌이 적용될 큰 이미지를 교환하고 div id = "one"의 내용도 표시합니다.jquery로 콘텐츠 표시/숨기기

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

이 코드는 당신이를 추가해야합니다 : 마찬가지로, 클릭 썸네일이 당신은 썸네일 링크를 선택하고 요소에 대한 click 이벤트 핸들러에 일부 표시/숨기기 로직을 추가 할 수 있습니다

<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

을 교환 할 것 .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

@Arpanet'.on()'은 jQuery 1.7에서 새로 추가되었으며이 경우'.bind()'와 동일합니다. 그 고시를 답에 붙이십시오. – Jasper

jquery로 콘텐츠 표시/숨기기

답변

관련 문제