-1

基本的に、私がやろうとしているのは、4 つのブロックのコンテンツを div で囲み、それぞれを画像に対応させ、div をクリックすると画像を変更することです。私はこれが本当に簡単であることを知っていますが、jquery の知識は限られており、主にプラグインに依存しています。可能であれば、情報 div をリンクに変更したくありません。ありがとう

これが私の現在のマークアップです。基礎グリッドの使用

<div class="feature-one row clearfix">
    <div class="three columns">
        <span class="twelve columns activities-1">
            <p class="marker"> Title of Service</p>
                <p>Longer description of services</p>
        </span>
        <span class="twelve columns activities-2">
            <p class="marker"> Title of Service</p>
                <p>Longer description of services</p>
        </span>
    </div>

        <div class="six columns" >
            <img id="activities-1" src="screenshot.jpg"/>
            <img id="activities-2" src="screenshot.jpg"/>
            <img id="activities-3" src="screenshot.jpg"/>
        </div>

        <div class="three columns">
            <span class="twelve columns activities-3">
                <p class="marker"> Title of Service</p>
                    <p>Longer description of services</p>
            </span>
        </div>
</div>

助けてくれてありがとう！

更新：これが私が持っているものの最終です。完璧ではなく、おそらくもっと簡潔になると思いますが、探している人の助けになることを願っています. クリーンアップしたい人は、おそらく hoverIntent で動作するようにしてください。追加を歓迎します

    $('.feature-one img').each( function() {
    $(this).hide().filter(":first-child").show();;
});
$('.feature-one span').on('hover click', function() {
    var sName = $(this).attr('id');
    $('img#' + sName).fadeIn(800);
    $('.feature-one img').not($('img#' + sName)).fadeOut(800);
}
);
4

1 に答える 1

1

ワーキングフィドルリンク。

$(document).ready( function() {
    $('img').hide();
    $('span').on('click', function() {
        var sName = $(this).attr('id');
        $('img#' + sName).toggle(800);
    });
});

idフィドルリンクでわかるように、各span要素にプロパティを追加しました。

于 2013-01-18T17:28:52.903 に答える