Jquery製表符和css問題

我在主頁面使用jquery選項卡打開aspx文件，一旦用戶單擊選項卡標題。但是，如果我使用我的頁面作爲鏈接，它會重複「標題」部分（類似於：jquery tabs and asp.net master pages issue）。已經嘗試過這種解決方案，但無法擺脫困境。有人可以請幫助。這裏是我的母版代碼：Jquery製表符和css問題

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

來源

2012-10-06 Zaki

任何人都可以幫忙嗎？ – Zaki

如jquery tabs and asp.net master pages issue中所述，您有兩種方法可以做到這一點：

如果你想通過AJAX加載頁面內容，那麼你需要確保內容頁面（攜帶標籤內容）不應該有自己的標題或標籤。它應該是普通頁面（不要使用母版頁），只有內容需要顯示在標籤
第二種方式（我想你試圖遵循）是在標籤點擊，關注實際的網址（即瀏覽器地址欄現在會有新的網址）。在這種方案中，您需要指示jquery選項卡，而不是使用AJAX加載選項卡內容。在原來的答案提供的FAQ鏈接似乎是由jQuery用戶界面被刪除 - 而不是看到這太問題wheer原來的常見問題爲引用：Follow the links of the tab in jquery ui tab

來源

2012-10-08 06:59:55 VinayC

感謝您的回覆。請參閱我的編輯。我做的東西不正確..它不會重定向到任何頁面... – Zaki

@ Sam1，在您的js中有問題 - '$（'。tabs'）'假設div與css class'tabs'。你用這個id作爲div，所以你需要把它改成'$（'＃tabs'）。tabs ...'。此外，在使用第二種方式時，要顯示選項卡內容的頁面（例如Track.aspx）不應使用具有佈局渲染選項卡的母版頁。 – VinayC

Jquery製表符和css問題

回答

相關問題