jquery - 从另一个页面直接链接到 jQuery 选项卡？

Question

让我们先说我精通 HTML 和 CSS，但 jQuery 的东西对我来说有点新鲜。所以这可能真的很容易修复，我已经查看了其他答案，但我无法掌握它。

我有一个 jQuery 选项卡表设置了四个选项卡，如下所示:

<ul class="tabs">
    <li>
        <a rel="tab_1">Education Insurance</a>
    </li>
    <li>
        <a rel="tab_2">Home Insurance</a>
    </li>
    <li>
        <a rel="tab_3">Car Insurance</a>
    </li>
    <li>
        <a rel="tab_4">Business Insurance</a>
    </li>
</ul>

每个选项卡的内容位于其下方的单独 div 标记中，如下所示:

<div class="panes">
    <div id="tab_1" class="tab-content">
        <p>Tab content goes here.</p>
    </div>

我想做的是在主页上创建一个链接，该链接可以直接链接到位于单独页面上的选项卡 2 或选项卡 3。有人可以帮忙吗？

Answer 1

您可以使用 jQuery UI 选项卡，这是自动完成的。

这是一个Working Fiddle

标签链接

First tab

Second tab

Third Tab

引用:JQuery UI tabs

更好的是，您可以更改 select 上的哈希，以便用户可以像这样自己复制 url

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});

​