2

4つの[詳細]ボタンがあり、それぞれにコンテンツの段落が関連付けられています。各段落は最初は非表示になっているので、ボタンの1つをクリックすると、関連するコンテンツの段落が表示されるようにします。次に、別のボタンをクリックすると、現在表示されている段落が非表示になり、2番目にクリックされたボタンに関連付けられているコンテンツの段落が表示されます。

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/

4

3 に答える 3

4 
$(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-04T05:41:35.993 に答える
0 
<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-04T05:53:34.437 に答える
0

これを試して

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;        
}

デモ

于 2013-01-04T05:58:33.210 に答える