通过点击图片过渡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

所有你需要的是平面的JavaScript或更小的代码，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，你可以绑定到你的李以及。