jQuery 选项卡 - 可以使用 innerhtml 的动态选项卡吗？答案

【问题标题】：jQuery tabs - Dynamic tabs with innerhtml possible?jQuery 选项卡 - 可以使用 innerhtml 的动态选项卡吗？
【发布时间】：2014-02-20 09:53:01
【问题描述】：

我正在尝试创建一个 jquery 选项卡控件，方法是使用 jQuery 选项卡的正确 html 更改（填充）div 标签的 innerhtml。

当 html 页面第一次加载时，它会正确显示选项卡。（显然 jquery css 和 html 有效）

当我单击一个按钮，以编程方式更改标签的 innerhtml，加载新内容（标签）时，样式表似乎没有刷新，我只剩下显示新的项目符号 href 标签，而不是标签。

我的问题：我是采用正确的方法（动态加载标签）还是有更好的方法？我应该以某种方式刷新内联样式表来修复显示吗？

【问题讨论】：

标签： jquery tabs

【解决方案1】：

如果没有示例，很难准确理解您想要做什么，但假设您想要添加新选项卡，Java_User 在使用刷新时是正确的。

如果选项卡的 HTML 如下：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a> </li>
        <li><a href="#tabs-2">Tab 2</a> </li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2</p>
    </div> 
</div>

可以使用以下代码添加新标签：

// number of existing tabs
var num_tabs = $("#tabs ul li").length + 1;
// add new tab
$("#tabs ul").append("<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>");
// add tab content
$("#tabs").append("<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>");
// refresh the content so they appear as 'tabs'
$("#tabs").tabs("refresh");

编辑：忽略上述内容。我可以让它工作的唯一方法是在注入新的 HTML 后销毁并重新创建选项卡。例如：

// inject the HTML for the new tabs
$("#tabs").html("<ul><li><a href='#tabs-1'>New Tab 1</a></li><li><a href='#tabs-2'>New Tab 2</a></li></ul><div id='tabs-1'>New Tab 1</div><div id='tabs-2'>New Tab 2</div>");
// Destroy and recreate the tabs
$('#tabs').tabs('destroy').tabs();

【讨论】：

我会试试你的建议。我目前正在用新的 html（适合 jquery 的格式）替换
的全部内容，然后调用刷新方法。以下只是我如何注入选项卡的“缩小”示例。 ds = document.getElementById("tabs"); ds.innerHTML = "

"; $("#tabs").tabs("刷新");