Question

 <script>
    $(document).ready(function() {
    var msg='{"ui":{"callData":[{"Title":"Caller Details", "Text":"<html><body><table border=&quot;1&quot;><tr><td>Caller details content</td></tr></table></body></html>"},{"Title":"Add Information", "Text":"<html><body><table border=&quot;1&quot;><tr><td>Add information content</td></tr></table></body></html>"}]}}';
    var response=JSON.parse(msg);

    $.each(response.ui.callData, function(index, item) {
        if(index==0)
        $("#tabs ul").append('<li><a href=&quot;#tabs-'+(index+1)+'&quot;>'+item.Title+'</a><span class=" ui-icon "></span></li>');
        else
        $("#tabs ul").append('<li><a href=&quot;#tabs-'+(index+1)+'&quot;>'+item.Title+'</a><span class=" ui-icon ui-icon-circle-close ui-closable-tab "></span></li>');
        $("#tabs").append('<div id="tabs-'+(index+1)+'"></div>');
        $("#tabs-"+(index+1)).html(item.Text);
    });
    });
}
);

 <script>
$(function() {
$( "#tabs" ).tabs();
$(".ui-closable-tab").live( "click", function() {
    var tabContainerDiv=$(this).closest(".ui-tabs").attr("id");
    var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    $("#"+tabContainerDiv).tabs("refresh");
});
});
</script>

    ...
    ...
    <div id="tabs">
     <ul>
     </ul>
    </div>

面临的问题是，jQuery能够在页面加载时显示2个标签但是两个标签内部htmls 正在显示＆＃39;来电详情内容＆＃39; 和＆＃39;添加信息内容＆＃39;。优先级，任何人都可以建议如何解决这个问题？我只想要＆＃39;来电详情内容＆＃39;显示在＆＃39;来电者详情＆＃39;标签和＆＃39;添加信息内容＆＃39;显示在＆＃39;附加信息＆＃39;标签

Answer 1

您应该只在插入信息后声明选项卡。因此，请删除当前的$( "#tabs" ).tabs();行，然后在JSON的$.each之后添加它，这样您的第一个脚本应如下所示：

  $(document).ready(function () {
      var msg = '{"ui":{"callData":[{"Title":"Caller Details", "Text":"<html><body><table border=&quot;1&quot;><tr><td>Caller details content</td></tr></table></body></html>"},{"Title":"Add Information", "Text":"<html><body><table border=&quot;1&quot;><tr><td>Add information content</td></tr></table></body></html>"}]}}';
      var response = JSON.parse(msg);

      $.each(response.ui.callData, function (index, item) {
          if (index == 0) $("#tabs ul").append('<li><a href=&quot;#tabs-' + (index + 1) + '&quot;>' + item.Title + '</a><span class=" ui-icon "></span></li>');
          else $("#tabs ul").append('<li><a href=&quot;#tabs-' + (index + 1) + '&quot;>' + item.Title + '</a><span class=" ui-icon ui-icon-circle-close ui-closable-tab "></span></li>');
          $("#tabs").append('<div id="tabs-' + (index + 1) + '"></div>');
          $("#tabs-" + (index + 1)).html(item.Text);
      });

      $( "#tabs" ).tabs();
  });

jQuery内部html问题

1 个答案: