带有额外填充的jquery选项卡动态创建/删除新选项卡

时间:2014-12-03 16:16:19

标签: javascript jquery html tabs spacing

我遇到了Jquery Tabs的问题,并且更精确地说明了每个标签之间的填充,在我的页面上,我多次创建和删除。

每次创建和删除标签页时,标签区域都会留下额外的空格:

example

为什么[主要标签]和[标签1]之间的距离在[标签1]和[标签9]之间是不一样的,因为在中间创建并删除了8个新标签?

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

http://jsfiddle.net/wh3ct1cn/

2 个答案:

答案 0 :(得分:1)

问题是你只删除了锚点,而不是整个列表项。这是一个修复:

$( "#demo ul a[href^=#tab5]" ).parent('li').remove();

Demo


为什么不使用remove()函数?

,而不是从DOM中删除它们
//-- Delete tabs 5, 6, and 7
for (i = 7; i > 4; i--) {
    $("#demo").tabs('remove', i);
}

Demo

我正在以相反的顺序工作,因为每次操作后索引都会改变。

答案 1 :(得分:1)

您需要删除li元素,而不是a元素。

  

$(“#demo mo a [href ^ =#tab”+ i +“]”)。parent()。remove();