Jquery UI tabs disable AJAX functionality for some tabs

How is it possible to disable AJAX functionality for a tab or two when using jQuery UI tabs?

So after clicking the user is taken to an URI defined by the href at开发者_运维技巧tribute of a link. Right now, the default behaviour is that the content from the the external URI is loaded via AJAX.

Not sure why you need this as it defeats the purpose of a tabbed pane and the user may not be expecting a full window refresh however...

The tabs expose a select event which you can hook into. You could then use some logic (check if the link has a certain css class or if the url is a certain page etc) to decide if to follow the default ajax behaviour of actually follow the link in the browser.

$("#tabs").tabs({

        select: function(event,ui) {
            var url = $.data(ui.tab, 'load.tabs');

            if (url==='somepage'){
                //follow the link
                window.location.href=url;
                return false;
            }

        }
});​

Solution based by link class in tab

<ul class="">
   <li class=""><a href="http://www.example.com/#tabs-1" rel="">Tab 1</a></li>
   <li class="ajax-disabled"><a href="http://www.example.com/anotherpage.php#tabs-1">Tab 2</a></li>
</ul>

And JS:

$('#tabs').tabs({
   select: function(event,ui) {
      if($(ui.tab).hasClass('ajax-disable')){
         window.location.href = ui.tab.href;
         return false;
      }
   }
});

When user click on tab with class "ajax-disabled", then new page will be loaded.

I have solved this myself...

HTML:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top"><a href="#tabs-1" rel="http://www.example.com/">Tab 1</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-1" rel="http://www.example.com/">Tab 2</a></li>
</ul>

JS:

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

I know this is old, but I stumbled on this question as I was trying to solve roughly the same problem, and have come up with a different solution. From what I gather, you want the look and feel of the jQuery tabs, but you want to retain the default browser behaviour of the links in the tab launching other pages. I require similar functionality where I have pages for each tab, each page display the list of tabs, and I just want to link back and forth using the anchor element in the tab, I don't want the jQuery tab to do any Ajax etc.

The following has worked for me.

Given the following html:

<div id="tabs">
    <ul>
        <li><a href="Page1.html">Page 1</a></li>
        <li><a href="Page2.html">Page 2</a></li>
        <li><a href="Page3.html">Page 3</a></li>
        <li><a href="Page4.html">Page 4</a></li>
    </ul>
</div>

Here's the following javascript:

var sUrl = window.location.href;
var $tabs = $("#tabs");

$tabs.tabs({
    beforeLoad: function (event, ui)
    {
        //Prevent the tab loading logic from executing
        return false;
    }
}).find("li a").each(function ()
{
    var $tablink = $(this);

    //Remove the click event, which will revert to the browser handling the click, not the jQuery tab javascript
    $tablink.unbind('click');

    //If the current page url contains the tab href then select it.
    if (sUrl.toLowerCase().indexOf($tablink.attr("href").toLowerCase()) > -1)
    {            
        //Get the index of the li element within the ol or ul element.
        var index = $tablink.parent().index();

        //Select the tab
        $tabs.tabs('option', 'active', index);
    }
});

$('#tabs').tabs({
        beforeLoad: function( event, ui ) {
            // Prevent the tab loading logic
            return false;
        },
        create: function( event, ui ) {
            $(ui.tab[0]).parent('ul').parent().find('[role="tabpanel"]:empty').remove();
            $(ui.tab[0]).parent('ul').find('li').each(function () {
                var href = $(this).find('a').attr('href');
                $(this).find('a').parent('li').attr('aria-controls', href.replace(/#/, ''));
                $(this).attr('aria-selected') === 'true' ? $(href).attr('role', 'tabpanel') : $(href).attr('role', 'tabpanel').hide();
            });
        }
    });

You can create a tab with a normal link without javascript like this:

<div id="tabs">
    <ul>
        <li><a href="#one"><span>Anchor tab</span></a></li>
        <li><a href="http://example.com/ajax"><span>Ajax tab</span></a></li>
        <li class="noajax"><a></a><a href="http://example.com/no-ajax" class="ui-tabs-anchor"><span>Link tab</span></a></li>
        <style>
        .noajax a:first-child {
            display: none;
        }
        </style>
    </ul>
</div>

The third tab here will function as a normal link. Three parts make this work:

1. A decoy <a> at the start of the tab's <li>. JQueryUI will bind its ajax load function to it, leaving the second <a> to function as a normal link.
2. The decoy is hidden using a:first-child.
3. The tab's real <a> is given class="ui-tabs-anchor" so it receives the correct style treatment.