jquery, access page tab "with ajax content" via external hyperlink?

Question

Im having trouble to open a page displaying a specific jquery tab that loads its content via ajax.

The problem is that jquery-ui opens tabs called by external links using the anchor hashtag but a ajax content tab anchor doesn't has one.

Any ideas

Thanks in advance.

Basicaly the same code in the jquery-ui demos
What i want is to have a link in my homepage that will open this other page already displaying tabX

$(document).ready(function() {
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                        error: function( xhr, status, index, anchor ) {
                            $( anchor.hash ).html(
                                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                "If this wouldn't be a demo." );
                        }
            }
        });
    });
});



<div id="tabs">
    <ul>
        <li class="tab first_tab"><a id="tab1" href="tab1.html">dit doen we</a></li>
        <li class="tab"><a id="tab2" href="tab2.html">disciplines</a></li>
        <li class="tab"><a id="tab3" href="tab3.html">cases</a></li>
        <li class="tab"><a id="tab4" href="tab4.html">uitgelicht</a></li>
    </ul>
</div>

do you mean you want to have a link that opens a tab that loads its content via AJAX? — William Niu, Sep 30 '11 at 22:15
Do you mean the link is on another page, or do you mean the content to be loaded is another page? — William Niu, Sep 30 '11 at 22:35
:D the link(Last poject) is in my homepage, this link should take me to another page(our work page) that has a tab called Last Project. and this tab content is loaded via ajax. thanks :P — theRolk, Sep 30 '11 at 22:48

score 1 · Accepted Answer · edited May 23 '17 at 11:47

To select a tab, you can use the select method on .tabs(), e.g. $('#tabs').tabs('select', 1) would select the 2nd tab (with a tab index of 1).

To open a page and tells it to select a tab, you will need to "pass the intention" somehow. If you're using AJAX for the page transition, then you can simply load the page and call .tabs('select', tabIndex).

If you load the 2nd page without AJAX, you can pass in a variable with the querystring, e.g. ?loadTab=1 and parse for it in the page being loaded. location.search will give you the querystring. This question will help you parse it.

So, on the 2nd page, you would have something like this:

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

    // code to parse the loadTab variable in the querystring

    if (typeof(loadTab) !== 'undefined' && parseInt(loadTab) !== 'NaN')
        $('#tabs').tabs('select', parseInt(loadTab));
}

jquery, access page tab "with ajax content" via external hyperlink?

1 Answers1