jquery ui no selected tab - show static content then tab content when tab selected

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.

Answers


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

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

Need Your Help

How does switch compile in Visual C++ and how optimized and fast is it?

c++ visual-c++ if-statement switch-statement visual-c++-2010

As I found out that I can use only numerical values in C++'s switch statements, I thought that there then must be some deeper difference between it and a bunch of if-else's.