jquery 选项卡和 asp.net 母版页问题答案

【问题标题】：jquery tabs and asp.net master pages issuejquery 选项卡和 asp.net 母版页问题
【发布时间】：2013-11-04 06:48:02
【问题描述】：

我有一个包含母版页和内容页的网站。母版页的代码是：

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
    <form id="form1" runat="server">
    <div id="TopNav">
        <ul>
            <li><a href="TopDeals.aspx">Top Deals</a></li>
            <li><a href="AllDeals.aspx">All Deals</a></li>
            <li><a href="Account.aspx">Account</a></li>
            <li>
                <asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
                <asp:Button ID="Search" runat="server" Text="Search" />
            </li>
        </ul>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <!--Adding jQuery-->
    <script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <!--JavaScript and jQuery functions-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#TopNav").tabs();
        });
    </script>
</body>
</html>

我的内容页面是这样的：

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>

现在，标签完美呈现，但标签内使用的文本或

部分再次显示在每个选项卡内容中。

渲染方式的屏幕截图：

这里是渲染的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>



</title>

<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>

<body style="height: 800px">

    <form method="post" action="TopDeals.aspx" id="form1">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />

</div>



<div class="aspNetHidden">



    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />

</div>

    <div id="TopNav">

        <ul>

            <li><a href="TopDeals.aspx">Top Deals</a></li>

            <li><a href="AllDeals.aspx">All Deals</a></li>

            <li><a href="Account.aspx">Account</a></li>

            <li>

                <input name="ctl00$SearchBox" type="text" id="SearchBox" />

                <input type="submit" name="ctl00$Search" value="Search" id="Search" />

            </li>

        </ul>

    </div>

    <div>



Top deals page.



    </div>

    </form>

    <!--Adding jQuery-->

    <script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

    <!--JavaScript and jQuery functions-->

    <script type="text/javascript">

        $(document).ready(function () {

            $("#TopNav").tabs();

        });

    </script>

</body>

</html>

谁能告诉我这里做错了什么？

【问题讨论】：

你能粘贴你的html转换代码吗？
在上面添加了渲染的 html 代码。
从 html 标记中，我没有看到导航显示两次。尝试删除 jquery js tab 代码，重新构建应用程序，看看是否仍然出现同样的问题。

标签： asp.net jquery-ui master-pages

【解决方案1】：

您看到的行为与 jQuery 选项卡一致 - 您没有正确使用它。
典型的用例场景之一将具有如下标记：

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

注意li 上的本地引用href 和相应的标签内容div（具有相同的id）。

如果使用 URL，则 jquery 选项卡将自动创建内容 div 并使用 AJAX 加载它们（通过 AJAX 示例查看内容 - http://jqueryui.com/demos/tabs/#ajax）。

您的代码就是这种情况，您正在使用 urls - jquery 正在将 url 内容加载到选项卡中。因此，对于第一个选项卡，您可以看到 TopDeals.aspx 页面的内容 - 此页面使用相同的母版，因此选项卡标记出现在内容 div 中。

编辑：解决方法

首先，可用性专家不赞成通过标签打开新页面 - 检查http://www.useit.com/alertbox/tabs.html！但是，要实现您想要的，您需要将活动选项卡的 href 设置为本地链接。

例如，在母版页中

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

注意内容占位符的位置。现在，在每个页面中，您必须相应地调整活动的选项卡 href。例如，在 TopDeals.aspx 中，您必须在 page_load 或 page_prerender 中添加以下行：

Tab1.HRef = "#TabContent";

我建议不要使用硬编码的选项卡 ID 等，而是在母版页中使用中继器并从代码隐藏中填充它。这样，您可以在母版页中公开ActiveTab 属性（由内容页设置），这将调整正确选项卡的href。

最后一部分是标签导航：查看 jquery 标签中的this FAQ，以便在单击其他标签时，浏览器将打开该页面（而不是通过 AJAX 加载内容）。

编辑：上面的常见问题似乎已被 jquery 团队删除。要跟随标签 URL，需要处理选择事件 - 例如

$('.tabs').tabs({
  select: function(event, ui) {
     var url = $.data(ui.tab, 'load.tabs');
     location.href = url; // follow url
     return false; // to disable default handling
  }
});

【讨论】：

谢谢 Vinay .. 这解释了这个问题。但是有什么办法可以解决这个问题，或者我必须停止使用母版页或手动创建标签。
我有同样的问题，无法解决问题。你能说得更多吗？这是我的问题：stackoverflow.com/questions/12763569/jquery-tabs-and-css-issue
@Sam1，请参阅我的编辑。我已经回答了你的问题。