我在母版页中使用 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 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
关于Jquery Tabs 和 css 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12763569/