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”父div

我正在使用的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，用于放置内容。

但正如我所说，我从未尝试过这个

如何在特定Div中显示tabpage

2 个答案: