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;
    }
});

Answer 2

这是documentation :)非常简单的片段，我自己也用过。

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

如果您想要在页面上“加载”（即主页上的链接将您带到不同的选项卡式屏幕），您只需要在请求中传递一些内容，即文档加载可以是decypher和使用.tabs（“select”，tabNo），如上所示。再一次，我在生产代码中做到了这一点并且它是可靠的。

Answer 3

我假设所有内容div都是可见的，当用户点击它时你需要滚动到那个特定的div。您只需将按钮绑定到滚动事件。

 $(document).ready(function() {
 $('button2').click = function (){
 $(document).scrollTo('#tab2');
 } 
 });

 $(document).ready(function() {
 $('button3').click = function (){
 $(document).scrollTo('#tab3');
 } 
 });

现在创建两个ID为“button1”和“button2”的按钮。例如。

<div id='button2'>Tab2</div>
or
<a href='#' id='button2'>Tab2</a>

当用户点击它们时，他将被带到内容div。

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

3 个答案: