单击链接时显示和隐藏段落

根据单击的图像更改段落的最简单方法是什么？这里是内容看起来像JSFIDDLE减去段落的显示。根据您点击的图像，图像下方的段落将一次显示1个。单击链接时显示和隐藏段落

<div class="content"> 
    <div class="memberPhotoWrapper"> 
     <div class="memberPhotos"> 
      <a href="#"><img class="member1Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a> 
      <a href="#"><img class="member2Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a> 
      <a href="#"><img class="member3Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a> 
      <a href="#"><img class="member4Photo" src="http://s30.postimg.org/gpichz4n1/portraitplaceholder.jpg" alt="" title=""></a> 
     </div> 
    </div> 
    <div class="memberIntros"> 
     <div class="member1Intro"> 
      <h3>User Name</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> 
     </div> 
     <div class="member2Intro"> 
      <h3>User Name</h3> 
      <p>PSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.</p> 
     </div> 
     <div class="member3Intro"> 
      <h3>User Name</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> 
     </div> 
     <div class="member4Intro"> 
      <h3>User Name</h3> 
      <p>PSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.</p> 
     </div> 
    </div> 
</div>

来源

2014-01-15 Javier Cortez

事情是[**这**]（http://jsfiddle.net/M7DhU/5/）？ – akinuri

@akinuri是的，谢谢你的帮助！ –

和其他所有花时间的人！ –

在纯JS：

var img = document.getElementsByTagName("img"); 
var intros = document.getElementsByClassName("intros"); 

for(var i = 0; i < img.length; i++) { 
    (function(i) { 
     img[i].onclick = function() { 
      reset(); 
      intros[i].style.display = "block"; 
     } 
    })(i); 
} 

function reset() { 
    for(var i = 0; i < img.length; i++) { 
     intros[i].style.display = ""; 
    } 
}

FIDDLE

来源

2014-01-16 00:36:09 akinuri

使用隐藏/显示与jQuery库

$(document).ready(function(){ 
    var m1= true; 
    $(".member1Photo").click(function() { 
     if(m1) { 
      $('#member1').hide(); 
      m1=false; 
     }else{ 
      $('#member1').show(); 
      m1=true; 
     } 
     }); 

    });

http://jsfiddle.net/djedjex/M7DhU/4/

来源

2014-01-16 00:06:31 jmercier

功能你可以使用这个简单的代码块（使用jQuery）。

$('.memberPhotos img').click(function() { 
    $('.memberIntros .current').hide('slow'); 
    $('#'+this.id+'_intro').show('slow'); 
    $('#'+this.id+'_intro').addClass('current'); 
});

例如这里http://jsfiddle.net/8kgwR/1/

你需要改变一些类/ ID名称，以适应。

来源

2014-01-16 00:11:24 GeorgeQ

不良链接小提琴 – jmercier

对不起，更新... – GeorgeQ

单击链接时显示和隐藏段落

回答

相关问题