0

ここで助けが必要です。私はこれを達成しようとしています：

デフォルトでは、画像はcssdisplayによって非表示になっています。

たとえば、ユーザーがリンクをクリックすると、バニラ釉薬が表示され、画像alt「バニラ釉薬」と一致する画像が表示されます。

次に、ユーザーが別のリンクをクリックすると、たとえば：brookyln blackoutはアクティブな画像を非表示にし、brookylnblackout画像を表示します。

意味がありますか？これが私のhtmlマークアップです。

jQueryの部分についてサポートが必要です。どこから始めればよいかわからない。

<div id="nameWrapper">

<ul>

<li><a href="#" class="vanilla-glazed">vanilla glazed</a></li>
<li><a href="#" class="brookyln-blackout">brookyln blackout</a></li>

</ul>

</div>


<div class="gallery">

<div class="image-wrapper">

<img src="#" alt="brookyln-blackout" />

   <div class="meta">
   <p>description</p>
   </div>

</div>

<div class="image-wrapper">

<img src="#" alt="vanilla-glazed" />

   <div class="meta">
   <p>description</p>
   </div> 

</div>

</div>
4

1 に答える 1

1

あなたはこのようなことを試すことができます

 $(document).ready(function(){ //on load of the document 
   $("#nameWrapper a").click(function(){ //on a click on a a in your div
       $('.image-wrapper img').hide(); //hide all images (including already hidden ones
       $("img[alt='"+$(this).attr('class')+"']").show(); //show the image with alt value          
   });
});

フィドルを参照してください

于 2013-03-05T21:30:09.257 に答える