All geek questions in one place

JQuery and css tabs

I use jquery tabs on the main page to open aspx files when the user clicks on the tab title. But if I use my page as a link, it will repeat the “header” part (similar to this: jquery tabs and asp.net main page ). I already tried the solution, but I can not omit it. Maybe someone can help. here is my code on the main page:

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

Edit:

Here is my second version code:

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

and on the page I do this:

 <%@ 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>
0
source share
1 answer

As indicated in the jquery tabs and asp.net main pages , you have two ways to do this:

  • If you want to load the contents of the page via AJAX, you need to make sure that the content pages (containing the contents of the tabs) should not have headers or tabs. It should be a simple page (do not use the main page), in which only the content on the tab will be displayed

  • The second method (which I suppose you are trying to execute) is on the tab, click on the corresponding URL (i.e. the new URL will now be in the address bar of the browser). In such a scheme, you need to instruct jquery tabs not to use AJAX to load the contents of the tab. The link to frequently asked questions contained in the original answer seems to be removed by JQuery UI - instead, look at this SO question, which cites the original FAQ: Follow the tab links on the tab in the jquery ui tab

+1
source

Source: https://habr.com/ru/post/1398536/

More articles:


All Articles