我正在使用 cms 系统的基本 jQuery UI 选项卡设置,我想知道如果具有相应 id 的内容面板为空,是否可以隐藏导航选项卡。
HTML
<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>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
</div>
JavaScript
$(function() {
$( "#tabs" ).tabs();
});
帮助表示赞赏:)
如果要删除所有空选项卡,可以使用以下代码:
$(function() {
var $tabs = $( "#tabs" );
$tabs.tabs();
var offst = 0;
$('#tabs > div').each(function(index, elem) {
if ($(elem).html().trim() === '') {
$tabs.tabs( "remove" , index - offst);
offst++;
}
});
});
Here's http://jsfiddle.net/LpsLK/1/jsfiddle 上的一个例子
Notes:
- 原因是
offst
变量是因为,如果删除选项卡,索引将会更改。
- 这会将选项卡元素缓存在
$tabs
所以它不必多次调用选择器。
- 这使用正确的
remove
jQuery UI 选项卡的功能。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)