Jquery Tabs and css issue

问题

I am using jquery tabs in master page to open the aspx files once user clicks on a tab heading. But if I use my page as link it will repeat the "header" part(similar to this:jquery tabs and asp.net master pages issue). Already tried the solution but cannot get my head around it. Can someone please help. here is my code in 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 my second version 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>

and in page I do this :

<%@ 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>

回答1:

As stated in jquery tabs and asp.net master pages issue, you have two ways to do it:

If you wish to load page contents via AJAX then you need to make sure that the content pages (that carries tab content) should not have headers or tabs them-selves. It should be the plain page (don't use Master page) that will only have the content needs to be displayed in tab
The second way (which I suppose you are trying to follow) is on tab click, follow the actual URL (i.e. browser address bar will now have new URL). In such scheme, you need to instruct jquery tabs, not to use AJAX to load tab contents. The FAQ link provided in the original answer seems to be removed by Jquery UI - instead see this SO question wheer the original FAQ is quoted: Follow the links of the tab in jquery ui tab

来源：https://stackoverflow.com/questions/12763569/jquery-tabs-and-css-issue

标签

jquery

ASP.NET

css

tabs

master-pages