CODEWITHSUNDEEP
jquerytabs
user2227823
user2227823

Reputation: 35

Link to a tab and make it active?

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

Upvotes: 1

Views: 5305

Answers (1)

Severun
Severun

Reputation: 2916

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.

Upvotes: 1

Related Questions