Jquery选项卡和css问题答案

【问题标题】：Jquery Tabs and css issueJquery选项卡和css问题
【发布时间】：2012-09-27 15:10:10
【问题描述】：

一旦用户单击选项卡标题，我将在母版页中使用 jquery 选项卡打开 aspx 文件。但是如果我使用我的页面作为链接，它将重复“标题”部分（类似于：jquery tabs and asp.net master pages issue）。已经尝试过解决方案，但无法理解它。有人可以帮忙吗。这是我在母版页中的代码：

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

编辑：

这是我的第二个版本代码：

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

在页面中我这样做：

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

【问题讨论】：

标签： jquery asp.net css tabs master-pages

【解决方案1】：

如jquery tabs and asp.net master pages issue 中所述，您有两种方法：

如果您希望通过 AJAX 加载页面内容，那么您需要确保内容页面（带有标签内容）本身不应有标题或标签。它应该是普通页面（不要使用母版页），只有需要在标签中显示的内容
第二种方式（我想您正在尝试遵循）是在选项卡上单击，遵循实际 URL（即浏览器地址栏现在将具有新 URL）。在这种方案中，您需要指示 jquery 选项卡，而不是使用 AJAX 加载选项卡内容。原始答案中提供的常见问题解答链接似乎已被 Jquery UI 删除 - 而是在引用原始常见问题解答时看到这个 SO 问题：Follow the links of the tab in jquery ui tab

【讨论】：

感谢您的回复。请看我的编辑。我做的不对……它没有重定向到任何页面……
@Sam1，您的 js 中存在问题 - $('.tabs') 假定 div 具有 css 类 tabs。您将其用作 div 的 id，因此您需要将其更改为 '$('#tabs').tabs...`。此外，在使用第二种方式时，将显示选项卡内容的页面（例如 Track.aspx）不应使用具有布局呈现选项卡的母版页。