<script>
$(document).ready(function() {
var msg='{"ui":{"callData":[{"Title":"Caller Details", "Text":"<html><body><table border="1"><tr><td>Caller details content</td></tr></table></body></html>"},{"Title":"Add Information", "Text":"<html><body><table border="1"><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="#tabs-'+(index+1)+'">'+item.Title+'</a><span class=" ui-icon "></span></li>');
else
$("#tabs ul").append('<li><a href="#tabs-'+(index+1)+'">'+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 个选项卡，但是两个选项卡内部 html 都显示“来电者详细信息内容”和“添加信息内容” 。 关于优先级，有人可以建议如何解决这个问题吗？ 我只想在“来电详细信息”选项卡中显示“来电详细内容”，在“其他信息”选项卡中显示“添加信息内容”。
最佳答案
您应该仅在插入信息后声明选项卡。因此，删除当前的 $( "#tabs").tabs(); 行，并将其添加到 JSON 的 $.each 之后，这样您的第一个脚本应该如下所示像这样:
$(document).ready(function () {
var msg = '{"ui":{"callData":[{"Title":"Caller Details", "Text":"<html><body><table border="1"><tr><td>Caller details content</td></tr></table></body></html>"},{"Title":"Add Information", "Text":"<html><body><table border="1"><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="#tabs-' + (index + 1) + '">' + item.Title + '</a><span class=" ui-icon "></span></li>');
else $("#tabs ul").append('<li><a href="#tabs-' + (index + 1) + '">' + 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();
});
关于javascript - jQuery 内部 html 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32358468/