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

Question

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?

Solution

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)