Link 添加到选项卡并将其激活？

Question

我有一个带有 3 个选项卡的 table 选项卡 - jquery-ui.min.js

的日间课程、晚间课程和在线课程

我希望能够从网站上的其他页面link到这些选项卡，因此 link 到晚间课程会将我带到课程页面并且晚间选项卡将处于活动状态.我已经尝试了很多 suggestions 我在网上找到的但是 none 工作我只能 link 到已经激活的选项卡。出现的大多数建议似乎是针对 Bootstrap，但我没有使用 Bootstrap，现阶段也不是一个选项。如果有人能告诉我这是否真的可行，如果可以的话，我将不胜感激。

这是我的代码的简化版本：

<div id="tabs">
    <ul>
        <li class="active"><a href="#tabs-2">Day Course</a></li>
        <li><a href="#tabs-3">Evening Courses</a></li>
        <li><a href="#tabs-4">Online Courses</a></li>
    </ul>

    <div id="tabs-2" style="display:block;">
        <p>Tab 2 content</p>
    </div>
    <div id="tabs-3" style="display:none;">
        <p>Tab 3 content</p>          
    </div>
    <div id="tabs-4" style="display:none;">
        <p>Tab 4 content</p>           
    </div>

</div><!-- /End the tabs-1 -->

jQuery(function() {
            jQuery( "#tabs" ).tabs();
         });

Answer 1

尝试链接到 http://yousite.com/#tabs-3

我有相同的设置，没有 bootstrap、jquery ui 等。我刚刚测试过，它似乎可以工作，加载页面，然后选择我指定的选项卡.

我也会删除硬编码的 display:none，这可能会给您带来问题。

我更新了这段代码，所以有一个工作示例。我无法在 jsfiddle 上运行它，因此在下面的示例中它使用了两个文件。

请记住，原来的问题是。

"I want to be able to link to these tabs from other pages on the site".

要使用下面的示例，您必须保存以下两个 Javascript 和 HTML 文件。到您的本地硬盘驱动器（或最喜欢的网络服务器）并调用一个 otherpage.html 并调用另一个 test.html，您会看到在 [=68= 末尾使用“#tab-name” ] 将在从不同页面调用时起作用。

如果您尝试将链接放在 SAME 页面上（不是发布者所要求的）。使用将不起作用，因为它不会强制重新加载页面，因此解析 URL 并激活选项卡的代码位不是运行。您将需要使用其他一些张贴者提到的回调之一。但这不是你问的，以此类推。

以下示例有效（在 Chromium 中测试）。

------otherpage.html----------

    <html>
    <body>
    <ul>
        <li><a href="test.html#tab-1">Load Page w/ Tab 1</a></li>
        <li><a href="test.html#tab-2">Load Page w/ Tab 2</a></li>
        <li><a href="test.html#tab-3">Load Page w/ Tab 3</a></li>
    </ul>

    </body>
    </html>

----------------结束otherpage.html------------

----------------test.html-----------------

    <html>
    <head>
    <script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <link rel="stylesheet"     href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script     src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    </head>
    <body>
    <div id="main_tabs">
        <ul>
                <li><a href="#tab-1">Ipso</a></li>
                <li><a href="#tab-2">Loro</a></li>
                <li><a href="#tab-3">Factum</a></li>
        </ul>
        <div id="tab-1">
                <p>Tab 1 Content</p>
        </div>
        <div id="tab-2">
                <p>Tab 2 content</p>
        </div>
        <div id="tab-3">
                <p>Tab 3 content</p>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

                $("#main_tabs").tabs({
                        activate: function(event, ui) {
                                window.location.href =     ui.newPanel.selector;
                        }
                });
        });
    </script>

    </body>
    </html>

------------结束test.html--------

激活函数中的位使得如果他们单击不同的选项卡，然后重新加载页面，他们单击的选项卡将保持活动状态。

Link 添加到选项卡并将其激活？

Link to a tab and make it active?

jquery

tabs