动态添加LI时，JQuery选项卡的样式设置不正确

所以我所做的是动态地向和UL添加项目，没有问题。但是我想用jquery选项卡创建选项卡。但是标签的样式似乎不是100%正确。我假设它与我如何插入我的li以及正常li的渲染有关。无论如何，这是我的代码。我取出了一些动态部分，只是想让它插入，但仍然无法正确渲染

<div id="tabs">
  <ul >
      <li><a href="#LinkSection">A</a></li>
      <li><a href="#LinkSection">b</a></li>
  </ul>

  </div>
    <div id="LinkSection">
        Test Data

    </div>



   <script type="text/javascript">

$('#tabs').tabs(
       {

           fx: { opacity: 'toggle' },
           select: function (event, ui) {
               jQuery(this).css('height', jQuery(this).height());
               jQuery(this).css('overflow', 'hidden');
           },
           show: function (event, ui) {
               jQuery(this).css('height', 'auto');
               jQuery(this).css('overflow', 'visible');
           }

       }
       );
function CreateTabs() {

               for (var i = 1; i < 3; i++) {            
                   $('#tabs ul').append(
                    $('<li>').append(
                    $('<a>').attr('href', '#LinkSection').append(
                    $('<span>').attr('class', 'tab').append("Message center")
                        )));

               }

           }
</script>

测试数据
$（'#制表符'）。制表符(
{
fx:{opacity:'toggle'}，
选择：功能（事件、用户界面）{
jQuery（this.css（'height'，jQuery（this.height（））；
jQuery（this.css（'overflow'，'hidden'）；
},
显示：功能（事件、用户界面）{
jQuery（this）.css（'height'，'auto'）；
jQuery（this.css（'overflow'，'visible'）；
}
}
);
函数CreateTabs（）{
对于（var i=1；i<3；i++）{
$（'#tabs ul'）。追加(
$（“
”）。追加(
元("
);；

因此，问题似乎不在于这段代码，而在于我的json调用。我没有在初始代码中包含这一点，因为我不认为这会对我获取列表的方式产生影响，但确实如此。我似乎忽略了async:false，而这正是导致问题的原因。

您只需要刷新以下选项卡：

$("#tabs ul").append('<li><a href="#LinkSection">c</a></li>');
$('#tabs').tabs("refresh");

$（“#tabs ul”）.append（“
”）；
$（'#制表符'）。制表符（“刷新”）；

您可以在此处检查JSFIDLE：

可能存在的副本

$("#tabs ul").append('<li><a href="#LinkSection">c</a></li>');
$('#tabs').tabs("refresh");