添加JQuery選項卡時無序排列

運行代碼並單擊第一行選項卡的最後一個選項卡。添加JQuery選項卡時無序排列

<html> 
</html> 
<button id="addspan">Add tabs</button> 
<div id="wrap"> 
    <ul></ul> 
</div> 

<script> 
$(function() { 
$('#wrap').tabs(); 
$('#addspan').click(function() { 
    $('#wrap').tabs("add", "#page" + 1, 1); 

    $('#wrap').tabs("add", "#page" + 2, 2); 
    $('#wrap').tabs("add", "#page" + 3, 3); 
    $('#wrap').tabs("add", "#page" + 4, 4); 
    $('#wrap').tabs("add", "#page" + 5, 5); 
    $('#wrap').tabs("add", "#page" + 6, 6); 
    $('#wrap').tabs("add", "#page" + 7, 7); 
    $('#wrap').tabs("add", "#page" + 8, 8); 
    $('#wrap').tabs("add", "#page" + 9, 9); 
    $('#wrap').tabs("add", "#page" + 10, 10); 
    $('#wrap').tabs("add", "#page" + 11, 11); 
    $('#wrap').tabs("add", "#page" + 12, 12); 
      $('#wrap').tabs("add", "#page" + 13, 13); 
      $('#wrap').tabs("add", "#page" + 14, 14); 
      $('#wrap').tabs("add", "#page" + 15, 15); 
      $('#wrap').tabs("add", "#page" + 16, 16); 
      $('#wrap').tabs("add", "#page" + 17, 17); 
      $('#wrap').tabs("add", "#page" + 18, 18); 
      $('#wrap').tabs("add", "#page" + 18, 18); 
      $('#wrap').tabs("add", "#page" + 18, 18); 
}); 
}); 
</script>

看到，有一個無序的標籤。不發生

此問題如果jQuery的版本更改爲1.7.2和jQuery的UI到1.8.18（在菜單中進行更改）

任何想法？

來源

2013-03-01 vctlzac

目前還不清楚你問什麼，請更新您的問題，給我們發生了什麼事的一個更好的解釋。 – Nix 2013-03-01 20:33:42

我沒有看到任何版本的jQuery出現問題，順序是好的（從1到18）。 – 2013-03-01 20:36:57

這是因爲jQuery UI CSS將它自己的類添加到活動選項卡並插入邊距底部的規則。添加你自己的來覆蓋它。

.ui-tabs .ui-tabs-nav li.ui-tabs-active { 
    margin-bottom:0; 
}

jsFiddle example

來源

2013-03-01 20:36:04 j08691

太棒了！但我不會在我的真實項目中做到這一點。我的css文件是由： http://jqueryui.com/themeroller/ – vctlzac 2013-03-01 21:01:49

我不明白你的意思。即使您使用的是jQuery UI themeroller，您也可以按照我所展示的覆蓋它。 – j08691 2013-03-01 21:02:54

真的。我將.gsp文件（grails）中的「style」標籤應用於此代碼，但無法工作:(。我刪除了css導入並開始工作，但我無法刪除此css。 – vctlzac 2013-03-01 21:08:20

添加JQuery選項卡時無序排列

回答

相關問題