Несколько групп вкладок на странице - CSS/jQuery
Я знаю, что эту тему уже задавали, но просмотр сообщений не совсем то, что я ищу, поэтому, пожалуйста, потерпите меня на минутку.
сначала вот мой маленький jQuery (работает без нареканий)
$(document).ready(function(){
$(".tabs li").click(function() {
$(".tab-content").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
$(".tabs li").removeClass('current');
$(this).addClass("current");
return false;
});
});
И мой основной HTML
<ul class="tabs">
<li class="active"><a href="#tab4">Tab 4</a></li>
<li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li>
<li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li>
</ul>
<div id="tab4" class="tab-content">Tab 4</div>
<div id="tab5" class="tab-content">Tab 5 </div>
<div id="tab6" class="tab-content">Tab 6 </div>
Естественно, если я добавлю более одной вкладки на страницу, при каждом нажатии вкладки содержимое всех вкладок будет "скрываться", и мне нужно заставить каждый раздел с вкладками вести себя независимо.
Моя проблема в том, что я хочу избежать маршрутизации идентификатора, в идеале я могу поместить JS прямо в шаблон, и каждый раз, когда кому-то нужна область с вкладками, он может просто вставить HTML, возможно, добавить идентификатор в UL и заполнить пробелы.
Вкладки и их содержимое будут вставлять другие, не очень хитрые люди, так что если я смогу избежать их использования JS, жизнь была бы замечательной!
Я думал об игре с фильтрами, заменой строк, дочерними элементами (поместите div в LI?) И т. Д., Но перед тем, как погрузиться в незнакомый океан без моего плавучего поплавка, я подумал, что один из профессионалов может дать мне подсказку и указать мне на правильное направление. JS / JQuery никогда не был моим любимым ^^.
Большое спасибо!
1 ответ
Это должно сделать свое дело: http://jsfiddle.net/BLGUW/
HTML:
<div class="tabs">
<ul>
<li class="active"><a href="#tab4">Tab 4</a></li>
<li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li>
<li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li>
</ul>
<div id="tab4" class="tab-content">Tab 4</div>
<div id="tab5" class="tab-content">Tab 5 </div>
<div id="tab6" class="tab-content">Tab 6 </div>
</div>
<div class="tabs">
<ul>
<li class="active"><a href="#tab40">Tab 4</a></li>
<li><a href="#tab50"><div class="alert-icon">Tab 5</div></a></li>
<li><a href="#tab60"><div class="printer-icon">Tab 6</div></a></li>
</ul>
<div id="tab40" class="tab-content">Tab 4</div>
<div id="tab50" class="tab-content">Tab 5 </div>
<div id="tab60" class="tab-content">Tab 6 </div>
</div>
JS
$(document).ready(function(){
$(".tabs li").click(function() {
$(this).parent().parent().find(".tab-content").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
$(this).parent().find("li").removeClass('current');
$(this).addClass("current");
return false;
});
});
Я уверен, что это можно оптимизировать;)