Question

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

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

现在，标签呈现完美，但标签或

部分中使用的文字会在每个标签内容中再次显示。

它是如何呈现的屏幕截图： enter image description here

这是呈现的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>

任何人都可以在这里说出我做错了什么？

Answer 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 exaple - http://jqueryui.com/demos/tabs/#ajax查看内容）。

您的代码就是这种情况，您正在使用网址 - jquery正在选项卡中加载网址内容。因此，对于第一个选项卡，您可以看到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";

我建议在母版页中使用Repeater并从代码隐藏中填充它，而不是使用硬编码的tab 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
  }
});

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

1 个答案: