July 22, 2012

how to navigate from one tab to other by clicking on a hyperlink using jquery ui tabs

Question by Hardworker

Could any one help me on how to navigate from first tab to second tab by clicking a hyperlink in first tab using JQUERY UI tabs?

Answer by Shant

You can refer the jQuery UI Tabs documentation for your problem, its very well mentioned

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;

Answer by Starx

You can switch between tabs freely by following the indexes using select method.
An example:

$("#tabs").tabs('select', 1);

Attach this snippet to the click handler of the link on the content of first tabs.


For a link like this:

<a href="some.html" id="nextTab">Go to Next Tab</a>


$("#nextTab").click(function() {
     $("#tabs").tabs('select', 1);

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!