Question

我正在使用jquery ui标签，我有一个页面，标签内有标签，内部标签的内容通过Ajax加载（通过在我的元素的href属性中传递URL）。 HTML是这样的：

<div class="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-4">Tab 3</a></li>
</ul>

<div id="tabs-1" class="tabs">
<p>Some content for parent tabs 1</p>

<!-- Inner tabs -->

<ul>
<li><a href="ajax/content1.html">Inner Tab 1</a></li>
</ul>

</div>

<div id="tabs-2" class="tabs">
<p>Some content for parent tabs 2</p>

<!-- Inner tabs -->

<ul>
<li><a href="ajax/content2.html">Inner Tab 2</a></li>
<li><a href="ajax/content3.html">Inner Tab 3</a></li>
</ul>

</div>

<div id="tabs-3" class="tabs">
<p>Some content for parent tabs 3</p>

<!-- Inner tabs -->

<ul>
<li><a href="ajax/content4.html">Inner Tab 4</a></li>
<li><a href="ajax/content5.html">Inner Tab 5</a></li>
<li><a href="ajax/content6.html">Inner Tab 6</a></li>
</ul>

</div>

</div>

我想做的是两件事：

1-因为内部选项卡的内容是通过Ajax加载的，所以当用户第一次进入页面时，这些选项卡还没有显示任何内容。因此，用户必须实际单击以显示内部选项卡的内容，但我想要的是当用户第一次来到页面时，我希望将默认预选内部选项卡的内容显示给用户（而不是一些空白内容）

2-我知道我可以使用选项卡的selected选项设置在初始化时选择了哪些选项卡，如下所示：

$( ".selector" ).tabs({ selected: 0 });

通过这样做，我将始终选择第一个选项卡（但这仅在我们首次初始化选项卡时有效）。我现在想要的是，当用户点击父标签时，总是选择第一个内部标签。换句话说，如果用户点击Tab 1，我想要选择内部选项卡Inner Tab 1，如果用户点击Tab 2，我想要选择内部选项卡Inner Tab 2，如果用户点击选项卡3，我想要选择内部选项卡内部选项卡4。我还希望所选标签的内容始终可见。

我希望我的解释清楚。请有人帮助我。

谢谢

Answer 1

首先要显示一些示例内容，请使用以下内容。对于innertab1，您不需要通过URL导航，因为内容将通过AJAX加载。而不是href，给出'div id'，其中标签内容将被存储，如下所示：

    <ul>
        <li><a href="#innertab1">Inner Tab 1</a></li>

    </ul>
    <div id="innertab1">
        Sample content of inner tab 1. This content will be loaded via ajax
    </div>

另外，我不确定我理解你的第二点。当我点击tab1时，我看到内部tab1，当我点击tab2时，我看到内部tab2。有什么问题？

始终将第一个选项卡设置为选中，并始终显示所选选项卡jquery ui选项卡的内容

1 个答案: