Доступный плагин семантических вкладок jQuery
-
20-09-2019 - |
Вопрос
Просто небольшой вопрос, чтобы узнать, знает ли кто-нибудь какие-либо плагины вкладок jquery, которые работают на основе структуры, аналогичной:
<div class="tabs">
<div>
<h4>Tab one</h4>
<p>Lorem Ipsum</p>
</div>
<div>
<h4>Tab two</h4>
<p>Lorem Ipsum</p>
</div>
</div>
Где плагин берет название вкладок из h4s?Кажется, я могу найти только плагины, которые используют структуру:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>
Я предполагаю, что единственный другой способ использовать эти плагины — это получить заголовки, удалить их, добавить их в список вверху HTML, а затем запустить плагин на основе этого?Я просто спрашиваю, так как я новичок в jQuery, поэтому не знаю, как бы я это сделал, и просто задавался вопросом, существует ли уже какой-нибудь плагин, о котором кто-нибудь знает.
Если нет, не волнуйтесь, мне придется заняться документами и попробовать!
Ваше здоровье
Решение
Мне удалось кое-что собрать воедино, чтобы привести HTML к правильной структуре для использования вкладок пользовательского интерфейса jQuery. Надеюсь, кто-нибудь сможет чему-то научиться из этого!
$(document).ready(function() {
$.fn.reverse = [].reverse; //Set the reverse function
$('#tabs div h4').reverse().prependTo('#tabs'); //Grab the headings and reverse them, then prepend to outer div
$('#tabs h4').wrap('<li></li>'); //wrap each heading in an li
$('#tabs > li').wrapAll('<ul class="tabheadings"></ul>'); //wrap all li's in ul
$('#tabs ul li h4').each(function(){
$(this).replaceWith('<a>' + $(this).text() + '</a>'); //for each heading replace with an anchor but keep innards
});
$('#tabs div.in_content_box').each(function(i){
$( this ).attr('id', 'tabs-' + (i+1)); //for each div add an id with an incremental number
});
$('#tabs ul li a').each(function(i){
$( this ).attr('href', '#tabs-' + (i+1)); //match the href on the anchor with the id above
});
});
Другие советы
Доступные вкладки jQuery почти там, за исключением того, что заголовок находится за пределами целевого div.