이미지를 클릭하여 div의 전환 텍스트

Question

매우 새로운 js이지만 여기에 있습니다.

포트폴리오 섹션에서 이미지 중 하나를 클릭하고 텍스트 섹션의 h3 텍스트를 페이드 전환으로 변경하고 슬라이더에서 해당 슬라이드를 선택할 수 있기를 원합니다.

코드 :

<!-- 960 Container --> 
<div class="container"> 

    <!-- Description --> 
    <div class="sixteen columns"> 

     <!-- Text --> 
      <h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3> 

     <div class="flexslider"> 
      <ul class="slides"> 

       <li> 
       <div id="details">Tier-1 Tech Support</div> 
       </li> 

       <li> 
       <div id="details">Off-site Backups</div> 
       </li> 

       <li> 
       <div id="details">Loaner Computer</div> 
       </li> 

      </ul> 
     </div> 
    </div><!-- End Description--> 

    <!-- Portfolio Content --> 
    <div id="portfolio-wrapper"> 

     <!-- 1/4 Column --> 
     <div class="four columns portfolio-item"> 
       <div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/> 
       <div class="overlay link"></div></a></div> 
       <div class="portfolio-item-meta"> 
        <h4><a href="support.html">Tier-1 Tech Support</a></h4> 
       </div> 
     </div> 

     <!-- 1/4 Column --> 
     <div class="four columns portfolio-item"> 
       <div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/> 
       <div class="overlay link"></div></a></div> 
       <div class="portfolio-item-meta"> 
        <h4><a href="backup.html">Off-site Backups</a></h4> 
       </div> 
     </div> 

     <!-- 1/4 Column --> 
     <div class="four columns portfolio-item"> 
       <div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/> 
       <div class="overlay link"></div></a></div> 
       <div class="portfolio-item-meta"> 
        <h4><a href="loaner.html">Loaner Computer</a></h4> 
       </div> 
     </div> 



    </div><!-- End Portfolio Content --> 

</div><!-- End 960 Container --> 

Answer 1

자바 스크립트 또는 적은 코드, JQuery와면 당신이 필요로하는 모두이다.

그냥 마크 업에 IMG와 DIV를 배치하고 당신이 당신의 분할 화면을 전환하는 기능을하는 IMG의 클릭 이벤트를 바인딩

여러 컨테이너 (또는 동일 용기)를 참조, 여러 개의 이미지를 가질 수 있습니다 , 기본적으로 숨겨져 있지만 상대 이미지를 클릭하면 나타납니다.

는

아래 코드는 마크 업을 만들 참조와 같은 :

<div class="wrapper"> 
    <div class="image"> 
     <img src='../images/actions_button_ok.png' data-target="one" /> 
     <img src='../images/actions_button_ok.png' data-target="two" /> 
     <img src='../images/actions_button_ok.png' data-target="three" /> 
    </div> 
     <div class="target" id="one" > 
      this is text A 
     </div> 
     <div class="target" id="two" > 
      this is text B 
     </div> 
     <div class="target" id="three" > 
      this is text C 
     </div> 
    </div> 

과 같은 jQuery 코드 :

$(document).ready(function(){ 
    $('img').on("click",function(){ 
     $('.target').hide(); 
     $('#'+$(this).data('target')).toggle(1000); 
    });  
}); 

기본적으로, 당신의 HTML 구조는 당신의 선택이 될 수 있지만, 그건 어떻게 그것에 대해 가야합니다. jquery에 대해 더 자세히 알아보십시오.

이 부분은 fiddle입니다.

클릭하여 img로 바인딩하는 대신,이를 리로 바인딩 할 수도 있습니다.