單擊鏈接時顯示和隱藏段落

根據單擊的圖像更改段落的最簡單方法是什麼？這裏是內容看起來像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

單擊鏈接時顯示和隱藏段落

回答

相關問題