Select a jQuery UI tab by link

It will often be the case that you will need to trigger a jQuery UI tab from a bespoke link.

This can be done using following the formats listed below: 

Latest jQuery UI

$(selector).tabs('option', 'active' ,0);

Older jQuery UI 

$(selector).tabs('select',0);

 

In each case the index of the tab is used to target the tab, the index of tabs starts at 0 so consider this when you are targetting your tabs

Using data

Ultilising the data attribute you can create a simple jQuery function that will trigger the tabs as defined through the HTML itself.

<button type="button" class="btn btn-default" data-tab="0">Tab 1</button>

$('[data-tab]').click(function(){

        var tabId = $(this).data('tab');

        //alert(tabId);

        jQueryTabs.tabs('option', 'active', tabId);

        //jQueryTabs.tabs('"select', tabId);  //older version of jQuiry UI

        return false;

});

 

Check out the jsfiddle below of a working example

http://jsfiddle.net/devools/gg1a9eh0/


Author: Anonymous
Added: Friday, 29 Aug, 2014
Category: jQuery
Tags: HTML

Code

//Latest jQuery UI

$(selector).tabs('option', 'active' ,0);

//Older jQuery UI 

$(selector).tabs('select',0);

// Example

<button type="button" class="btn btn-default" data-tab="0">Tab 1</button>

$('[data-tab]').click(function(){

        var tabId = $(this).data('tab');

        //alert(tabId);

        jQueryTabs.tabs('option', 'active', tabId);

        //jQueryTabs.tabs('"select', tabId);  //older version of jQuiry UI

        return false;

});

Comments