アクティブなリンクがメニューをドロップダウンし、外部ページをにロードしdiv
て、同じクリックでバナーを変更するアコーディオンメニューがあります。バナー画像の変更を除いて、すべてが機能しています。コードは正しいと思いましたが、何かが足りないようで、わかりません。
これが私のhtmlです:
<section id="commercialBanner">
<img src="images/catalog/indoorBanner.jpg"/>
</section>
<section id="accordionNav">
<ul id="nav">
<li id="indoorEntrance" class="category"><a class="ext" id="indoor" href="montage.html">Indoor Entrance</a>
<ul id="indoorEntranceSubmenu" class="sideSub">
<li><a href="montage.html" class="ext">Ecomat Squares</a></li>
<li><a href="gatekeeper.html" class="ext">Gatekeeper</a></li>
<li><a href="absorba.html" class="ext">Absorba</a></li>
</ul>
</li>
<li id="outdoorEntrance" class="category"><a id="outdoor" class="ext" href="aquaFlow.html">Outdoor Mats</a>
<ul id="outdoorEntranceSubmenu" class="sideSub">
<li><a href="aquaFlow.html" class="ext" id="aquaflow">AquaFlow</a></li>
</ul>
</li>
</ul>
<section id="catalog"></section>
これが私のスクリプトです:
$('a.ext').click(function (event){
event.preventDefault();
$('#catalog').load(this.href);
});
$('.category > a').click(function(evt) {
if ($(this).attr('class') != 'active'){
$('#nav li ul').hide();
$(this).next().show()
// $(this).next('li > a').trigger('click')
$('#nav li a').removeClass('active');
$(this).addClass('active');
};
if ($('#indoor').attr('class') == 'active'){
$("#commercialBanner img").attr("src", "images/catalog/indoorBanner.jpg");
};
if ($('#outdoor').attr('class') == 'active'){
$("#commercialBanner img").attr("src", "images/catalog/outdoorBanner.jpg");
};
});