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

Question

我正在使用 jquery ui 选项卡，并且我有一个在选项卡中包含选项卡的页面，并且内部选项卡的内容通过 Ajax 加载（通过在我的 a 元素的 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，如果用户单击选项卡 2，我希望选择内部选项卡 Inner Tab 2，如果用户单击Tab 3，我希望选择内部选项卡 Inner Tab 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。有什么问题？