How to initialize jQuery UI Tabs without using the 'href' attribute?

Question

When using a <base> tag within a page that renders tabbed content by using the jQuery UI Tabs plugin, all hell breaks lose on that page. That's somehow because of the href attribute applied to the tabs' "title" elements, that the plugin relies on. From the plugin's documentation:

Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an href attribute"

Here's an example from my app:

<li><a href="#productsSection"><span>Choose product</span></a></li>

Is there a workaround I can use to initialize the Tabs plugin without using the href attribute? Off the top of my head, I believe it would have been better to rely on a data-href attribute.

Answer 1

You could use following snippet to reconstruct the href propety:

$(function () {
    $("#tabs").find('a').prop('href', function(){
        return window.location.href + $(this).attr('href');
    }).end().tabs(); // << initialize plugin HERE
});

--See for example--