單擊一個按鈕以顯示相關聯的內容

我有四個「瞭解更多」按鈕，並且每個按鈕都有一個關聯的內容段落。每個段落都將在開始處隱藏，然後我需要它，以便當單擊其中一個按鈕時，會顯示關聯內容的段落。然後，如果點擊了不同的按鈕，則當前顯示的段落將被隱藏，並顯示與第二個按鈕關聯的內容段落。單擊一個按鈕以顯示相關聯的內容

我很難搞清楚用jQuery完成這件事的最好方法是什麼。

這裏的HTML：

<button class="learn-more">Learn More</button> 
<button class="learn-more">Learn More</button> 
<button class="learn-more">Learn More</button> 
<button class="learn-more">Learn More</button> 

<p>First paragraph</p> 
<p>Second paragraph</p> 
<p>Third paragraph</p> 
<p>Fourth paragraph</p>

這裏的CSS：

p { 
    display: none;   
}

這裏是一個的jsfiddle與此代碼：http://jsfiddle.net/cYFy3/3/

來源

2013-01-04 Jordan

$(document).ready(function() { 
    var $b = $('button.learn-more'), $p = $('p'); 

    $b.click(function() { 
     var i = $b.index(this); 
     $p.hide().eq(i).show(); 
    }) 
});

http://jsfiddle.net/swuTP/

來源

2013-01-04 05:41:35 undefined

謝謝，這完美！ – Jordan

好吧，現在我試圖添加fadeout和fadeIn效果，但我似乎無法弄清楚如何使fadeIn效果等待fadeout效果在運行前完成。我試圖把fadeout放在回調中，但它似乎沒有做我想要的：http://jsfiddle.net/92Eg6/ – Jordan

@Jordan不用客氣，試試這個。 http://jsfiddle.net/em8c4/ – undefined

<button class="learn-more" paragraph_id="p1">Learn More</button> 
<button class="learn-more" paragraph_id="p2">Learn More</button> 
<button class="learn-more" paragraph_id="p3">Learn More</button> 
<button class="learn-more" paragraph_id="p4">Learn More</button> 

<p class="hide_paragraph" id="p1">First paragraph</p> 
<p class="hide_paragraph" id="p2">Second paragraph</p> 
<p class="hide_paragraph" id="p3">Third paragraph</p> 
<p class="hide_paragraph" id="p4">Fourth paragraph</p>

個

的JS：

$(document).ready(function() { 
    $('.learn-more').click(function(){ 
      $('.hide_paragraph').hide(); 
      $('#' + $(this).attr('paragraph_id')).show();    
    }); 

});

http://jsfiddle.net/CwVU7/22/

來源

2013-01-04 05:53:34

試試這個

HTML代碼

<div class="btn"> 
<button class="learn-more">Learn More</button> 
<button class="learn-more">Learn More</button> 
<button class="learn-more">Learn More</button> 
<button class="learn-more">Learn More</button> 
</div> 
<div class="pgf"> 
<p>First paragraph</p> 
<p>Second paragraph</p> 
<p>Third paragraph</p> 
<p>Fourth paragraph</p> 
</div>

JS代碼

$(document).ready(function() { 
    $('.btn button').on('click', function(){ 
     var btnindex = $(this).index(); 
     $('.pgf p').siblings('p').css({'display':'none'}); 
     $('.pgf p').eq(btnindex).css({'display':'block'}); 
    }); 
});

CSS

p { 
    display: none;   
}

DEMO

來源

2013-01-04 05:58:33 Codegiant

@Jordan是代碼爲你工作？ – Codegiant

單擊一個按鈕以顯示相關聯的內容

回答

相關問題