jQuery的标签和css问题 [英] Jquery Tabs and css issue

查看：163
本文介绍了jQuery的标签和css问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用的母版页jquery的标签，一旦用户点击一个标签标题，打开ASPX文件。但是，如果我用我的网页链接，因为它会重蹈头的一部分（类似于这样：的 jQuery的标签和asp.net母版页问题）。已经尝试过的解决方案，但不能让我的头周围。是否有人可以帮助。这里是我的code在母版：

 ＆LT;表ID =form1的=服务器＆GT;
＆LT; D​​IV CLASS =mainWrapper＆GT;
    ＆LT; D​​IV CLASS =包装＆GT;
        ＆LT; D​​IV CLASS =头＆GT;
            LT＆; A HREF =级=标志＆GT;＆LT; / A＆GT;
            ＆LT; D​​IV CLASS =topToolbar＆GT;
                ＆LT;跨度＆GT;欢迎及LT; A HREF =/级=注销＆GT;注销＆LT; / A＆GT;＆LT; / SPAN＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =容器＆GT;
            ＆LT; D​​IV ID =标签＆GT;
                ＆LT; D​​IV CLASS =tabsCenter＆GT;
                    ＆LT; UL＆GT;
                        ＆LT;立GT;＆LT; A HREF =Myfirstpage.aspx＆gt;首先＆LT; / A＆GT;＆LT; /李＆GT;
                        ＆LT;立GT;＆LT; A HREF =SecondPage.aspx＆gt;第二个＆LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT; / UL＆GT;                ＆LT; / DIV＆GT;                ＆LT; D​​IV CLASS =tabsBottom＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
           ＆LT; ASP：的ContentPlaceHolder ID =的BodyContent=服务器＆GT;
            ＆LT; / ASP：＆的ContentPlaceHolder GT;        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =推＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;

编辑：

下面是我的第二个版本code：

 ＆LT;身体GT;
    ＆LT;表ID =form1的=服务器＆GT;
    ＆LT; D​​IV CLASS =mainWrapper＆GT;
        ＆LT; D​​IV CLASS =包装＆GT;
            ＆LT; D​​IV CLASS =头＆GT;
                LT＆; A HREF =级=标志＆GT;＆LT; / A＆GT;
                ＆LT; D​​IV CLASS =topToolbar＆GT;
                    ＆LT;跨度＆GT;欢迎及LT; A HREF =/级=注销＆GT;注销＆LT; / A＆GT;＆LT; / SPAN＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =容器＆GT;
                ＆LT; D​​IV ID =标签＆GT;
                    ＆LT; D​​IV CLASS =tabsCenter＆GT;
                        ＆LT; UL＆GT;
                            ＆LT;立GT;＆LT; A HREF =Track.aspx=服务器ID =TAB1＆GT;轨道＆LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =Downloads.aspx=服务器ID =TAB2＆GT;下载和LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;％ - ＆LT;立GT;＆LT; A HREF =〜/ ClaimsLogin / ClaimsLogin＆gt;我的索赔＆LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =〜/问题/常见问题解答＆GT;常见问题解答＆LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =〜/我的资料/ ViewDetail＆gt;我个人资料＆LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =〜/ MyMessage /消息＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;  - ％GT;
                        ＆LT; / UL＆GT;
                        ＆LT; D​​IV ID =TabContent＆GT;
                        ＆LT; ASP：的ContentPlaceHolder ID =的BodyContent=服务器＆GT;
                        ＆LT; / ASP：＆的ContentPlaceHolder GT;
                        ＆LT; / DIV＆GT;
                        ＆LT; D​​IV ID =TabContent2＆GT;
                        ＆LT; ASP：的ContentPlaceHolder ID =BodyContent2=服务器＆GT;
                        ＆LT; / ASP：＆的ContentPlaceHolder GT;
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT; D​​IV CLASS =tabsBottom＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =推＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; /表及GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（文件）。就绪（函数（）{
            $（'标签'）。标签（{
                选择：函数（事件，UI）{
                    VAR URL = $。数据（ui.tab，'load.tabs'）;
                    location.href =网址; //网址如下
                    返回false; //禁用默认处理
                }
            }）;
        }）;
    ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

和页面我这样做：

 ＆LT;％@页面语言=C＃AutoEventWireup =真codeBehind =Track.aspx.cs继承=CustomerPortalV2.Track的MasterPageFile =〜 /Site.Master％GT;＆LT; ASP：内容ID =TrackcontentContentPlaceHolderID =的BodyContent=服务器＆GT;
＆LT; D​​IV CLASS =sideTabsWrapper＆GT;
追踪页面
＆LT; / DIV＆GT;
＆LT; / ASP：内容＆GT;


解决方案

作为的 jQuery的标签和asp.net母版页问题，你有两种方式来做到这一点：


  1. 如果您希望通过加载AJAX页面内容，那么你需要确保内容页面（携带标签的内容）不应该有标题或标签他们 - 自我。它应该是纯网页（不要使用母版页），将只需要对内容显示在标签


  2. 第二个方法（我假设你正在试图跟随）是选项卡上单击，按照实际的URL（即浏览器的地址栏会现在有新的URL）。在这种方案中，您需要指示jQuery的标签，而不是使用AJAX来加载选项卡的内容。在原来的答案提供了常见问题的链接似乎是由jQuery用户界面被删除 - 而不是看到这太问题wheer原来的常见问题为引用：<一href=\"http://stackoverflow.com/questions/3046308/follow-the-links-of-the-tab-in-jquery-ui-tab\">Follow标签的jQuery UI的选项卡中的链接


I am using jquery tabs in master page to open the aspx files once user clicks on a tab heading. But if I use my page as link it will repeat the "header" part(similar to this:jquery tabs and asp.net master pages issue). Already tried the solution but cannot get my head around it. Can someone please help. here is my code in masterpage:

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

解决方案

As stated in jquery tabs and asp.net master pages issue, you have two ways to do it:

  1. If you wish to load page contents via AJAX then you need to make sure that the content pages (that carries tab content) should not have headers or tabs them-selves. It should be the plain page (don't use Master page) that will only have the content needs to be displayed in tab

  2. The second way (which I suppose you are trying to follow) is on tab click, follow the actual URL (i.e. browser address bar will now have new URL). In such scheme, you need to instruct jquery tabs, not to use AJAX to load tab contents. The FAQ link provided in the original answer seems to be removed by Jquery UI - instead see this SO question wheer the original FAQ is quoted: Follow the links of the tab in jquery ui tab

这篇关于jQuery的标签和css问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆