jQuery tabs, use like menu, load page when click on link

Question

Hello,

I have added jQuery tabs to my upcomming site. So far no problem.

But I want - when clicking on a tab - that it should do and behave as a regular link.

Exampel 1: Look at this link http://jqueryui.com/demos/tabs/default.html. When clicking on the options:

• Nunc tincidunt
• Proin dolor
• Aenean lacinia

It loads the content from the same file and the URL is static (default.html).

I want the following:

Exampel 2: When clicking on

• Nunc tincidunt (ex. nunc.php)
• Proin dolor (ex. proin.php)
• Aenean lacinia (ex. aenean.php)

I want the hole page to re-load. Clicking on the tab "Nunc tincidunt" should load nunc.php (and the URL should be changed), clicking on "Proin dolor" should load proin.php and so on.

How should I accomplish this?

Answer 1

Hi,

Are you wanting to pull the content via ajax? If so this should help:

http://jqueryui.com/demos/tabs/ajax.html

Answer 2

I'm not sure what you want it to do, but if it should open the link as a new page/replacement for the current page, the documentation explains:

[How to...] ...follow a tab's URL instead of loading its content via ajax

Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });

See http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

Answer 3

Surely it is a matter of replacing your has links (#) with your .php links and changing the ID of the links to not reference those of the tabs?

Answer 4

You can give the anchors real href attributes, like this:

<div id="tabs"> 
    <ul> 
        <li><a href="nunc.php">Nunc tincidunt</a></li> 
        <li><a href="proin.php">Proin dolor</a></li> 
        <li><a href="aenean.php">Aenean lacinia</a></li> 
    </ul>
</div>​​​​​​​​​​

This will by default try and load those pages via AJAX into the corresponding tab. To prevent this behavior, just change the window.location yourself in the select event, like this:

$("#tabs").tabs({
    select: function(event, ui) {
       window.location = $.data(ui.tab, 'href.tabs');
    }
});​​​​​​​

You can give it a try here (note though you'll get unexpected/404 pages, since those PHP files aren't present on jsfiddle)