我在使用 Jquery Tabs 时遇到问题,更准确地说,我在页面上多次创建和删除每个选项卡之间的填充。
每次我创建和删除一个标签时,标签区域都会留下额外的空间:
考虑到在中间创建和删除了 8 个新标签,为什么 [Main Tab] 和 [Tab 1] 之间的距离在 [Tab 1] 和 [Tab 9] 之间不相同?
HTML:
<div id='demo'>
<ul>
<li><a href="#main">Main Tab</a></li>
<li><a href="#ref">Tab 1</a></li>
</ul>
<div id='main'>Main</div>
<div id='ref'>Reference tab</div>
</div>
JavaScript:
$( '#demo' ).tabs();
var tabs = $( "#demo" ).tabs();
var ul = tabs.find("ul");
//-- Create 10 tabs
for (i = 1; i < 10; i++) {
$( "<li><a href='#tab" + i + "'>Tab " + i + " </a></li>" ).appendTo(ul);
$( "<div id='tab" + i + "' style=''>This is the tab " + i + "</div>" ).appendTo(tabs);
}
tabs.tabs('refresh');
//-- Delete 9 tabs
for (i = 1; i < 9; i++) {
$( "#demo ul a[href^=#tab" + i + "]" ).remove();
$( "#demo div[id^=tab" + i + "]" ).remove();
}
tabs.tabs('refresh');
这是重现它的 JsFiddle
最佳答案
问题是您只是删除了 anchor ,而不是整个列表项。这是一个修复:
$( "#demo ul a[href^=#tab5]" ).parent('li').remove();
与其从 DOM 中删除它们,不如使用 remove()
函数?
//-- Delete tabs 5, 6, and 7
for (i = 7; i > 4; i--) {
$("#demo").tabs('remove', i);
}
我以相反的顺序工作,因为索引在每次操作后都会发生变化。
关于javascript - 带有额外填充的 jquery 选项卡动态创建/删除新选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27276534/