4

让我们先说我精通 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，它们位于单独的页面上。有人能帮忙吗？

4

3 回答 3

4

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

这是一个工作小提琴

标签链接

第一个标签

第二个选项卡

第三个标签

参考：JQuery UI 选项卡

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

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

​
于 2012-05-30T14:59:10.900 回答
0

我假设所有内容 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。

于 2012-05-30T14:58:15.020 回答
0

它在文档中:) 一个非常简单的片段，我自己用过。

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

如果您想在页面“加载”时执行此操作（即主页上的链接将您带到不同的选项卡式屏幕），您只需在请求中传递一些文件加载​​可以解密并使用 . tabs("select", tabNo) 如上图所示。同样，我已经在生产代码中完成了这项工作，而且它是可靠的。

于 2012-05-30T14:57:12.113 回答