製品がリストされている Web サイトがあります。約 30 個の製品があります。現在、各製品の詳細に移動するためのリンクがあります。それらすべてを 1 つのページに配置し、javascript を使用して、クリック時に特定の div のコンテンツを変更したいと考えています。 . 私が知っていることは、1つのdivの表示をnoneに変更する30の関数を作成できることです..そして他のものを表示する..これを達成する方法..私はこのようなことをしています
function changeImg2()
{
$('#change_content').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).css('display', 'none');
$('#change_content2').stop(true, true).fadeIn({ duration: slideDuration, queue: false });
}
ここに私が持っているdivのタイプがあります
<div id="change_content1">
<div class="viewport">
<a id="btn" href="http://www.flickr.com/photos/matt_bango/3479048548/">
<span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/HAND HELD POWER CUTTERS.jpg" alt="Northern Saw-Whet Owl" />
</a>
</div>
<div class="viewport no-margin">
<a href="http://www.flickr.com/photos/matt_bango/3478879694/">
<span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span>
<img src="images/LIGHTING TOWERS.jpg" alt="Red-shouldered Hawk" />
</a>
</div>
<div class="viewport">
<a href="http://www.flickr.com/photos/matt_bango/3478189088/">
<span class="light-background">Blue-headed Vireo <em>Photo by Matt Bango</em></span>
<img src="images/MAGNETIC STAND DRILLS.jpg" alt="Blue-headed Vireo" />
</a>
</div>
<div><input name="back" value="back" id="back_btn1" type="button"></div>
</div>
しかし、このコードは問題ありません...30 div 分のコードを繰り返す必要があるためです。これを達成するためのよりクリーンな方法はありますか。