只是一个简单的问题,看看是否有人知道基于类似结构运行的jquery tab插件:
<div class="tabs">
<div>
<h4>Tab one</h4>
<p>Lorem Ipsum</p>
</div>
<div>
<h4>Tab two</h4>
<p>Lorem Ipsum</p>
</div>
</div>
插件在哪里获取h4标签页的标题?我似乎只能找到使用以下结构的插件:
<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 UI选项卡-希望有人可以从中学到一些东西!
$(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
});
});