Question

Here is what I have so far…I’m trying to have a user come to a page where no tabs are selected but they are present on the page. When no tabs are selected I want the main page content to show. When a tab is selected I want the main page content to hide and the tab content to show for the appropriately selected tab.

$(document).ready(function () {
    if(location.hash) {
        $('#tabs').tabs();
        $('#campaigns').hide();
    } else {
        $('#tabs').tabs({
            selected: -1
        });
        $('#campaigns').show();
    }
});

My HTML is no different then the proper UI Tab procedure. I simply added another below that content with the id #campaigns.

Answer 1

You can bind a tabsselect event to tabs and use it to hide the extra div

$("#tabs").bind("tabsselect", function (event, ui) {
   $('#campaigns').hide();
});