Struggling with jquery ui tabs

ORIGINAL QUESTION:

The following works fine:

http://jsfiddle.net/oshirowanen/KYqyU/1/

i.e. if I click on tabs, then click on tab 0, 1, or 2, it will display the correct tab in the jquery ui tabs control.

However,开发者_JS百科 I do not want the tab 0 in the dropdown, I want it as the main button to activate the dropdown which then shows tab 1 and 2, like this:

http://jsfiddle.net/oshirowanen/KYqyU/3/

but when I do this, if I click on tab 0, it does not work properly. it should display tab-0 when tab 0 is clicked twice. then when i click it twice, nothing happens, and it seems to stop the other tabs from working.

What am I doing wrong?

EDIT 1:

It seems to switch to tab-0 when tab 0 is clicked 3 times, but when I do this, all the other tabs stop working

EDIT 2:

I have improved it a little by correcting a class name issue, in the jquery, it was "item "instead of "items". However, now when I click tab 0 three times, after that it just needs 1 click to go to tab 0, it should not go to tab 0 until it is clicked twice.

http://jsfiddle.net/oshirowanen/KYqyU/21/

EDIT 3:

Just to clarify, there should be no tab switching unless the dropdown is active. When the dropdown is active, it should switch to the correct tab depending on which one is clicked, then close the dropdown.

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');
});

});

Try removing id="tab0" from the div with class="nav1"