jquery选项卡上创建/删除新选项卡时有额外填充

Question

我有一个Jquery选项卡问题，并且更精确地在每个选项卡之间填充，在我的页面上，我创建和删除多次。

，我创建和删除一个选项卡，额外的空间每次留在标签领域：

为什么[主窗口]之间[标签1]的距离之间并不相同[Tab 1]和[Tab 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/

Answer 1

问题是你只是删除锚点，而不是整个列表项。这里有一个修复：

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

Demo

---

而不是从DOM删除它们，为什么不使用remove()功能？

//-- Delete tabs 5, 6, and 7 
for (i = 7; i > 4; i--) { 
    $("#demo").tabs('remove', i); 
} 

Demo

我以相反的顺序工作，因为该指标每次操作后改变。

Answer 2

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

$（“#demo ul a [href^=＃tab”+ i +“]”）.parent（）。remove（）;