jquery tab 在updatepanel中点Button后失效？？？？（附图）

悬赏园豆：20 [已关闭问题]

运行时效果：

点Button后：

代码：

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tabtest.aspx.cs" Inherits="tabtest" %>

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

    <script type="text/javascript" src="jscripts/jquery.min.js"></script>

    <link rel="stylesheet" href="jscripts/ui.tabs.css" type="text/css" media="print, projection, screen" />

    <script src="jscripts/ui.tabs.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $('#container-1 ul').tabs();
        });


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
       
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                 <asp:Button ID="Button1" runat="server" Text="Button" />
                 <div id="container-1">
                    <ul>
                        <li><a href="#fragment-1"><span>tab1</span></a></li>
                        <li><a href="#fragment-2"><span>tab2</span></a></li>
                    </ul>
                    <div id="fragment-1">
                        <p>content1</p>
                    </div>
                    <div id="fragment-2">
                        <p>content2</p>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

网站开发 Javascript

Colin | 初学一级 | 园豆：110
提问于：2009-10-21 17:08

< >

其他回答(2)

你放到IE下看看脚本出错的语句

James.Ying | 园豆：1472 (小虾三级) | 2009-10-22 10:48

this.Page.RegisterStartupScript("11",string.Format(this.JavaScriptTag, "$(function() { $('#tabs').tabs(); });"));

支持(0) 反对(0) 窝居都没有 | 园豆：200 (初学一级) | 2009-12-30 17:19

请问是怎么解决的?我现在也遇到了这个问题.

tianya2146 | 园豆：205 (菜鸟二级) | 2011-09-30 01:26

这个问题的产生是由于UpdatePanel执行了异步的Postback后，页面上的内容又被从新加载。

而你的代码是在页面加载时才执行.tabs()方法

    <script type="text/javascript">
        $(function() {
            $('#container-1 ul').tabs();
        });


    </script>

而，当UpdatePanel的异步PostBack执行完成后，以上代码不会被从新执行。所以看起来.tabs()就失效了。

解决这个问题的方法是在ScriptManager的pageLoaded客户端事件中处理初始化代码。代码类似于

Sys.Application.add_init(function(){
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(){
    //在这里初始化tabs
});
});

如有问题，我也很愿意帮助你解决。

无所畏惧，有所期待 | 园豆：199 (初学一级) | 2012-09-19 09:46

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

jquery tab 在updatepanel中点Button后失效？？？？（附图）

欢迎，请先登录或者注册。