Struggling with jquery ui tabs

You can't do that that way because you are filtering every click on th Document and after that redirecting the event to those element with an specific classes. That way you cant say to the jQuery tabifier to one element act as tab and as other thing

I think the best way is to re-structure the code and start over with a different approach.

It can be made that way but i think it is like cheating the code.

EDIT:

http://jsfiddle.net/KYqyU/56/

$(document).ready(function(){
$("#tabs").tabs();
$(".ui-tabs-nav").hide();

$("#tab0").click(function() {if($(this).hasClass("active"))$("#tabs").tabs( "select" , 0 );});
$("#tab1").click(function() {$("#tabs").tabs( "select" , 1 );});
$("#tab2").click(function() {$("#tabs").tabs( "select" , 2 );});

$(document).click(function(event) {
    $('.nav1.active, .nav2.active').trigger('click', true);
    $('.nav1, .nav2').removeClass("active");
});

$('.dropdown').each(function() {
    $(this).css('left', $(this).prev().position().left);
});

$('.nav1, .nav2').click(function(event, isTrigger) {
    $(this).siblings('.nav1.active, .nav2.active').trigger('click', true);

    if(!isTrigger && $(this).hasClass('active')){
        if ($(this).hasClass('nav1')) {
            /*alert("nav1 was clicked");*/
        }
        else if($(this).hasClass('nav2')) {
            /*alert("nav2 was clicked");*/
        }
    }

    $(this).toggleClass('active').next().toggle();
    event.stopPropagation();
});

$('.nav1, .nav2').disableSelection();

$('.items').click(function() {
    $(this).parent().toggle();
    $('.nav1.active, .nav2.active').removeClass('active');
});

});