The behavior you see matches the jQuery tabs - you are not using it correctly.
One of the typical use cases will have markup, for example:
<div id="tabs"> <ul> <li><a href="#tabs-1">First Tab</a></li> <li><a href="#tabs-2">Second Tab</a></li> </ul> <div id="tabs-1"> Tab 1 Content </div> <div id="tabs-2"> Tab 2 Content </div> </div>
Pay attention to the local href link to li and the corresponding tab div div (with the same identifier).
In the case of using URLs, the jquery tabs will automatically create the contents of the div and load them using AJAX (see contents via the AJAX exaple - http://jqueryui.com/demos/tabs/#ajax ).
This applies to your code, you are using urls - jquery loads the contents of the url in the tab. Thus, for the first tab, you can see the contents of the TopDeals.aspx page - and the same wizard is used on this page, and therefore the tab markup appears in the content section.
EDIT : workaround
First, opening a new page using a tab is not approved by usability experts - check out http://www.useit.com/alertbox/tabs.html ! However, to achieve what you want, you need to set the href of the active tab to a local link.
For example, on the main page
<div id="TopNav"> <ul> <li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li> <li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li> <li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li> <li> <asp:TextBox ID="SearchBox" runat="server"></asp:TextBox> <asp:Button ID="Search" runat="server" Text="Search" /> </li> </ul> <div id="TabContent"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div>
Pay attention to the placement of the content placeholder. Now on each page you need to configure the active href tab accordingly. For example, in TopDeals.aspx, you should add the following line to say page_load or page_prerender:
Tab1.HRef = "#TabContent";
Instead of using hard-coded tab identifiers, etc. I would suggest using a repeater on the main page and populating it with code. Thus, you can open the ActiveTab property on the main page (specified by the content pages), which will adjust the href of the correct tab.
Finally, the last part is the navigation tab: see this FAQ on jquery tabs so that when you click another tab, the browser will open this page (instead of this content downloaded via AJAX).
EDIT . It looks like the above FAQ has been removed by the jquery team. To follow the tab url, you need to select a descriptor select event - for example,
$('.tabs').tabs({ select: function(event, ui) { var url = $.data(ui.tab, 'load.tabs'); location.href = url;