Getting Target URL from jQuery-UI Tabs

Question

I\'m working on a project that makes heavy use of jQuery tabs and Ajax. Loading data into the tabs is simplicity itself, but the data in the tabs needs to be filtered by a s

Answer 1

var links = $("#thetabs > ul").find("li a");
var url = $.data(links[tabnum], 'href.tabs');

tabnum is the zero based index of the tab you want the url from

Answer 2

The following will write out the href's to the console.

Demo that alerts the ajax tab href's here

$('#tabs a').each(function() {
   var href = $.data(this, 'href.tabs');
   console.log(href);
})

Answer 3

You can also set the title property in the tab links.

<div id="tabs">
    <ul>
        <li><a href="tab1.html" title="First tab contents">tab1</a></li>
        <li><a href="tab2.html" title="Second tab contents">tab2</a></li>
        <li><a href="tab3.html" title="Third tab contents">tab3</a></li>
    </ul>
</div>

With this, JQueryUI will create divs with an id based on the title, with the spaces replaced by underscores, therefore you should be able to access the divs using something like

$("#First_tab_contents")

Cheers!