1

I have a tabbed table with 3 tabs - Day Courses, Evening Courses and Online Courses with jquery-ui.min.js

I want to be able to link to these tabs from other pages on the site, so a link to Evening Courses will bring me to the courses page and the Evening Tab will be active. I have tried a number of suggestions I found online but none work I can only link to what ever tab is already active. Most of the suggestions that come up seemed to be for Bootstrap but I am not using Bootstrap nor is it an option at this stage. If anyone can advise me if this is actually possible and if so a nod in the right direction would really be appreciated it.

This is a simplified version of my code:

<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();
         });
Community
  • 1
  • 1
user2227823
  • 35
  • 1
  • 6

1 Answers1

1

Try linking to http://yousite.com/#tabs-3

I have the same setup, no bootstrap, jquery ui, etc. I just tested and it appears to work, loads the page, then selects the tab I specify.

I would take out the hard coded display:none as well, that might be causing you problems.

I updated this code so there is a working example. I couldn't get this working on jsfiddle, so in the following example it uses two files.

Keep in mind, the original question was.

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

To use the example below you have to save the following two Javascript and HTML files. To your local hard drive (or favorite web server) and call one otherpage.html and call the other test.html, you'll see that using "#tab-name" at the end of your URL will work, when called from a different page.

If you are trying to put links on the SAME page (not what the poster asked). Using will not work, because it does not force a page reload, so the bit of code that parses the URL and activates the tab is not run. You will need to use one of the callbacks that some of the other posters mention. But that is not what you asked, so on with the example.

The following example works (Tested in 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>

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

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

The bit in the activate function makes it so that if they click a different tab, then reload the page, the tab they clicked will stay active.

Severun
  • 2,893
  • 1
  • 16
  • 22
  • Hi Severun, I am still battling this one!! It works in my JSFiddle but only in an older version of jQuery UI (1.9.2), but my sites running JQuery v1.11.4, can you shed any light on this? [link](https://jsfiddle.net/donz365/WXEme/62/) – user2227823 Sep 03 '15 at 17:50
  • In JSFiddle, I can only select JQuery 1.11.0, and when I select that, I get no option to include jQuery UI. In the example above I use JQuery 1.11.3 (Which is latest available on Google's hosted files) and JQuery UI 1.11.4. You can test the above by creating two files, on your local disk or web server. Just copy/paste into test.html & otherpage.html Then open with file:///directory/otherpage.html or http://yourserver/otherpage.html in your browser. As long as the two files are in the same directory, links clicked in otherpage.html should land on test.html with the desired tab selected. – Severun Sep 03 '15 at 18:58
  • I noticed something else in your JSFiddle. You are adding click events to #tab-nav-external li a. You do not need to do this. All you have do is create your tabs on test.html, then put your links on otherpage.html, when you call test.html#tabname, it will select the tab named tabname. You don't have to do any javascript on the page where your links are, you only have to initialize your tabs with $(selector).tabs(); That's it. Check the answer with the most votes here: http://stackoverflow.com/questions/574699/selecting-a-jquery-tab-using-a-parameter-in-the-url – Severun Sep 03 '15 at 19:09
  • Here is another reference: https://forum.jquery.com/topic/selecting-a-jquery-tab-from-javascript-based-on-the-url-parameter. Remember if your links are on the same page as the tabs it will not work. If the links are on a different page it will work fine, which might be why it's not working in JSFiddle. – Severun Sep 03 '15 at 19:14
  • I posted a working example at the following link. You can click the links that take you to another page that will select the tab with the link you click. It uses the example above, but with updated URL's to accomodate google drive. https://www.googledrive.com/host/0B73wFKRE7rNubkJObW9oZ1BnU0k feel free to view source and copy/paste/glue – Severun Sep 03 '15 at 19:39
  • I applied your code to mine but its not working its not hiding the content panes and the tabs are displayed in as lists. Is it possible to send you a private link to it show you? Its a wordpress website, could this be the problem? – user2227823 Sep 07 '15 at 01:01
  • Sure you can PM me a link to the page. Since you are in wordpress, I think the problem is as follows: 1. The $(selector).tabs(); code to initialize the tabs fires. 2. The item that you want to add tabs to draws in the page. In other words, the jquery UI tabs function is probably firing from the header, and so it fires before the elements for your tabs are actually drawing in the page. You probably want to add the wrapper function from the example, i.e. $(document).ready(function () { so that your tabs code doesn't fire until page load is done. – Severun Sep 08 '15 at 16:45
  • I made progress, I had an error enqueing the JQuery UI!!!! Tabs are now linking from other page I'm so delighted. You have been a huge help thank you sooo much. There is one thing when the page opens the tab content is shown but the tabs are out of view is there any clever tricks to fix this? Is it be possible to have a link for the tabs on the same page also with this for my own future reference? – user2227823 Sep 09 '15 at 16:41
  • ...or from main menu? Thanks Severun :) – user2227823 Sep 09 '15 at 16:52
  • If you scroll the page down do the tabs come into view? If so, then there is probably something else in the page causing it to scroll down. As far as selecting tabs from the same page, here is a link to a solution for that http://stackoverflow.com/questions/7244549/jquery-ui-tabs-switching-to-a-new-tab-programatically. Also keep in mind select is deprecated in JQ 1.9 , per this issue http://stackoverflow.com/questions/15304027/how-to-change-tabs-programmatically-in-jquery-ui-1-9 – Severun Sep 10 '15 at 17:49
  • Got it sorted, thank you for all your time and help Severun!!! This post http://stackoverflow.com/questions/28727926/jqueryui-1-11-tabs-link-directly-to-tab-while-on-the-same-page] really helped also – user2227823 Sep 11 '15 at 15:03