从另一个页面直接链接到 jQuery 选项卡? [英] Link directly to a jQuery tab from another page?

问题描述

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

Let's begin by saying I'm skilled in HTML and CSS, but this jQuery stuff is kind of new to me. So this might be really easy to fix and I've looked at other answers but I can't get the hang of it.

我有一个 jQuery 选项卡表，其中包含四个选项卡，如下所示:

I have a jQuery tab table set up with four tabs, like so:

<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 标签中，如下所示:

The content for each tab is in a separate div tag below it, like so:

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

我要做的是在主页上创建一个链接，该链接可以直接链接到标签 2 或标签 3，它们位于单独的页面上.有人可以帮忙吗?

What I'm trying to do is create a link on the homepage that can link directly to tab 2 or tab 3, which are on a separate page. Can anyone help with this?

推荐答案

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

You can use jQuery UI tabs, thats does that automatically.

这是一个工作小提琴

标签链接

第一个标签

第二个标签

第三个标签

参考:JQuery UI 选项卡

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

Even better you can change the hash on select so that users can copy the url themselves like this

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

​

这篇关于从另一个页面直接链接到 jQuery 选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！