3

jQuery でアニメーション化したい単純な画像/ビデオ ギャラリーがあります。私ができるようにしたいのは、誰かがリンクをクリックする.bigと、同じIDのdivが設定されdisplay:block; opacity:1、他のすべてのdivが設定されることだけですdisplay:none; opacity:0

これは私のギャラリーのマークアップです。

<div id="gallery">

    <div class="main">

        <div id="big-1" class="big"><!-- image / video here --></div>
        <div id="big-2" class="big"><!-- image / video here --></div>
        <div id="big-3" class="big"><!-- image / video here --></div>

    </div>

    <div class="thumbnails">

        <a id="1" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>

</div>

デフォルトでは、最初の div を除くすべての.bigdiv が設定されています。display:none; opacity:0

4

7 に答える 7

0

HTMLで属性を設定します

    <a rel="1" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a rel="2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a rel="3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

</div>

JSで

  $('a').click(function(){ 
        var target = $(this).attr('rel');
        $('div.big').hide();
        $("div#"+target).show();
     })
于 2013-11-07T12:23:06.180 に答える
0

複数の ID を持つべきではありません。一意である必要があります。カスタム HTML5 データ属性を使用して div を更新します。

<div target-id="1" class="big"><!-- image / video here --></div>
<div target-id="2" class="big"><!-- image / video here --></div>
<div target-id="3" class="big"><!-- image / video here --></div>

そしてこれを試してください：

$('.thumbnails a').click(function(){ 
    var target = $(this).data('target-id');
    $('div').hide();
    $('div[target-id=' + target).show();
 })
于 2013-11-07T12:24:05.957 に答える