Programmatically change tab using tabify jquery plugin

Question

I am using tabify http://unwrongest.com/projects/tabify to show tabs.

I am struggling to figure out how to change the tab programmatically.

Here is one working example: http://jsfiddle.net/S78Bt/

$(document).ready(function(){
    $('#menu').tabify();
});

Although I know that using JQuery UI tabs I can acheive this behavior, but due to some unavoidable circumstances I need to use tabify.

Answer 1

The project you are using seems dead, it hasn't received updates lately, it does not have documentation.

I've taken a look at the source code, there is no API to access tabs for you directly.

The only solution is to hack indirectly by seeing how the library expects the tabs to change:

function changeTab(name) {
    location.hash = name + '-tab';
}

This works on my example.

Answer 2

I'm not sure if it's the best way, but it works at least. If we look at source code of tabify plugin you will see:

function getHref(el){
    hash = $(el).find('a').attr('href');
    hash = hash.substring(0,hash.length-4);
    return hash;
}

function setActive(el){         
    $(el).addClass('active');
    $(getHref(el)).show();
    $(el).siblings('li').each(function(){
        $(this).removeClass('active');
        $(getHref(this)).hide();
    });
}

You may use similar approach: jsfiddle