Question

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

第一次加载html页面时，它会正确显示选项卡。（Obvoiusly jquery css和html工作）

当我点击一个按钮，以编程方式更改标签的innerhtml，加载新内容（标签）时，样式表似乎没有刷新，我留下了显示的新的bulletpointed href标签，而不是标签。

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

Answer 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后销毁并重新创建选项卡。 e.g：

// 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();

jQuery标签 - 可以使用innerhtml的动态标签吗？

1 个答案: