1

私は自分が何を望んでいるのかを説明するのが恐ろしいですが、うまくやってみてください。

わかりました、左側に html があります。

<div></div>
<div></div>
<div></div>
<div></div>

これが右側に出力されているものです。

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

左側の最初の div をクリックすると右側の最初の div が表示され、左側の 2 番目の div をクリックすると右側の 2 番目の div が表示され、右側の他のすべての div が表示されるようにしようとしています。再び隠されるなど。jQuery で .index() を使用して実行できることは知っていますが、その方法について何か助けが得られるかどうか疑問に思っていました。ありがとう！

4

4 に答える 4

4

このようなもの？

マークアップ

<div class="left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div class="right">
    <div class="block">Result 1</div>
    <div class="block">Result 2</div>
    <div class="block">Result 3</div>
    <div class="block">Result 4</div>
</div>

JS

$(function(){
   $('.left > div').on('click', function(){
        //Just show the respective block div based on the clicked index and hide its siblings that are visible.
        $('.block').eq($(this).index()).show().siblings('.block:visible').hide();
    });
});

デモ

ちょっとしたスライド効果で

$(function () {
    $('.block').eq(0).show();
    $('.left > div').on('click', function () {
        var elemToShow = $('.block').eq($(this).index()); //Get the element to show
        $('.block:visible').stop().slideUp(1000, function () { // slide up the visible block div
            elemToShow.stop().slideDown(1000); // once the animation finishes shidedown the element to show
        });

    });
});

デモスライド効果

デモフェード効果

于 2013-07-10T02:00:13.900 に答える
1

leftこれらの左側にクラスを配置すると仮定しますdiv。

var $blocks = $('.block'),
    $left = $('.left');

$('.left').click(function () {
    $blocks.hide().eq( $left.index(this) ).show();
});

これがフィドルです：http://jsfiddle.net/YddrP/

于 2013-07-10T01:57:13.013 に答える