如何在特定分区中显示选项卡页

Question

我使用的是jQuery选项卡控件：

http://jqueryui.com/demos/tabs/#ajax

我的设计是：

<div class="container2">
    <!-- review tabs -->
    <div id="tab1">
    <ul>
        <li id="tf1"><a href="../LoadUserControl.aspx?ucid=1" title="tabs-1">Reviews</a></li>
        <li id="tf2"><a href="../LoadUserControl.aspx?ucid=2"  title="tabs-1">Apps of the Week</a></li>
        <li id="tf3"><a href="../LoadUserControl.aspx?ucid=3"  title="tabs-1">Videos</a></li>
        <li id="tf4"><a href="../LoadUserControl.aspx?ucid=4"  title="tabs-1">Photos</a></li>
    </ul>

    <!-- its showing content of tab here -->
</div>

<!-- I want to show content of tab page here -->

默认情况下，它在"</ul>“下打开选项卡页，我需要该选项卡页显示在"</ul>'s”父目录之外

我正在使用的jQuery：

 $(function () {
    $("#tab1").tabs({
        ajaxOptions: {
            error: function (xhr, status, index, anchor) {
                $(anchor.hash).html(
                                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                    "If this wouldn't be a demo.");
            }
        }
    });
});

Answer 1

我也有过同样的问题。不幸的是，这就是选项卡小部件结构。你不能以一种干净的方式改变它。你唯一能做的就是每次都用.append()来移动内容，但这是一个肮脏的举动。

希望能帮上忙。干杯

Answer 2

我不能完全确定这一点，因为我不能测试它，但你可以试一试。在文档中，我看到：

请注意，如果您希望重用现有容器，可以通过匹配标题属性和容器的id：...

和一个容器，比如：

..。(请注意空格是如何替换为下划线的)

所以你可以这样做：

<li id="tf1"><a href="../LoadUserControl.aspx?ucid=1" title="tabs-new">Reviews</a></li>
            <li id="tf2"><a href="../LoadUserControl.aspx?ucid=2"  title="tabs-new">Apps of the Week</a></li>
            <li id="tf3"><a href="../LoadUserControl.aspx?ucid=3"  title="tabs-new">Videos</a></li>
            <li id="tf4"><a href="../LoadUserControl.aspx?ucid=4"  title="tabs-new">Photos</a></li>
</ul>

然后创建一个id='tabs-new‘的div来放置内容。

但就像我说的，我从来没试过