Utilizing jQuery tabs within a master page to open ASPX files when a tab heading is clicked. However, when the page is used as a link, it repeats the "header" part of the page (similar issue found here). Tried solutions without success. Can someone please provide assistance? Below is the code snippet from my masterpage:
<form id="form1" runat="server">
<div class="mainWrapper">
<div class="wrapper">
<div class="header">
<a href="" class="logo"></a>
<div class="topToolbar">
<span>Welcome <a href="/" class="logOut">Log Out</a></span>
</div>
</div>
<div class="container">
<div id="tabs">
<div class="tabsCenter">
<ul>
<li><a href="Myfirstpage.aspx">First</a></li>
<li><a href="SecondPage.aspx">Second</a></li>
</ul>
</div>
<div class="tabsBottom">
</div>
</div>
<asp:ContentPlaceHolder ID="BodyContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="push">
</div>
</div>
</form>
Edit:
Here is an updated version of the code :
<body>
<form id="form1" runat="server">
<div class="mainWrapper">
<div class="wrapper">
<div class="header">
<a href="" class="logo"></a>
<div class="topToolbar">
<span>Welcome <a href="/" class="logOut">Log Out</a></span>
</div>
</div>
<div class="container">
<div id="tabs">
<div class="tabsCenter">
<ul>
<li><a href="Track.aspx" runat="server" id="Tab1">Track</a></li>
<li><a href="Downloads.aspx" runat="server" id="Tab2" >Downloads</a></li>
<%--<li><a href="~/ClaimsLogin/ClaimsLogin">My Claims</a></li>
<li><a href="~/FAQ/FAQs">FAQ's</a></li>
<li><a href="~/MyProfile/ViewDetail">My Profile</a></li>
<li><a href="~/MyMessage/Message">Contact</a></li>--%>
</ul>
<div id="TabContent">
<asp:ContentPlaceHolder ID="BodyContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="TabContent2">
<asp:ContentPlaceHolder ID="BodyContent2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="tabsBottom">
</div>
</div>
</div>
</div>
<div class="push">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('.tabs').tabs({
select: function (event, ui) {
var url = $.data(ui.tab, 'load.tabs');
location.href = url; // follow url
return false; // to disable default handling
}
});
});
</script>
</body>
</html>
Within the specific page, I am implementing the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Track.aspx.cs" Inherits="CustomerPortalV2.Track" MasterPageFile="~/Site.Master" %>
<asp:Content ID="Trackcontent" ContentPlaceHolderID="BodyContent" runat="server">
<div class="sideTabsWrapper">
Track page
</div>
</asp:Content>