В основном, как это должно работать (и это работает в Firefox, Safari и Chrome), это то, что в списке есть три ссылки, и когда вы нажимаете одну, его класс используется для поиска элемента с тем же именем, но видентификаторТо, что div
затем исчезает после того, как все divs
с определенным классом исчезают (этот div
должен как класс, так и перехватывать все).
вот код JS:
$(".dynamic_nav li a").click(function() {
column_switch = $(this).parent().attr('class');
if($(this).hasClass('active_tab') == true) {
return false;
}
else {
$(".dynamic_nav li a").removeClass("active_tab");
$("div.portfolio_section").hide();
$("#" + column_switch).fadeIn(500);
$(this).addClass("active_tab");
}
return false;
});
И мой HTML-код:
<ul class="dynamic_nav">
<li class="web"><a class="active_tab" href="#">Web</a></li>
<li class="print"><a href="#">Print</a></li>
<li class="advertising"><a href="#">Advertising</a></li>
</ul>
<div id="web" class="portfolio_section"><p>Some Text<p></div>
<div id="print" class="portfolio_section"><p>Some Text<p></div>
<div id="advertising" class="portfolio_section"><p>Some Text<p></div>