Question

我有一个带有3个标签的标签表 - 日间课程，晚间课程和使用jquery-ui.min.js的在线课程

我希望能够从网站上的其他页面链接到这些标签，因此指向晚间课程的链接会将我带到课程页面，并且“晚上”标签将处于活动状态。我尝试了一些suggestions我在网上找到但没有工作我只能链接到已经激活的标签。提出的大多数建议似乎都是针对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等。我刚刚测试过它似乎工作，加载页面，然后选择我指定的选项卡。

我会拿出硬编码的显示器：没有，这可能会导致你的问题。

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

请记住，最初的问题是。

＆＃34;我希望能够从网站上的其他页面链接到这些标签＆＃34;。

要使用下面的示例，您必须保存以下两个Javascript和HTML文件。对于您的本地硬盘（或收藏的网络服务器）并调用另一个page.html并调用另一个test.html，您将看到使用＆＃34;＃tab-name＆＃34;当从其他页面调用时，您的URL末尾将起作用。

如果您尝试在 SAME 页面上放置链接（而不是海报要求的内容）。使用将无效，因为它不会强制页面重新加载，因此不会运行解析URL并激活选项卡的代码。您将需要使用其他一些海报提及的回调之一。但这并不是你提出的要求，以此为例。

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

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

＆＃13;

    <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>

＆＃13;

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

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

＆＃13;

    <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>

＆＃13;

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

激活功能中的位使得如果他们点击不同的标签，然后重新加载页面，他们点击的标签将保持活动状态。

链接到选项卡并使其处于活动状态？

1 个答案: