Question

我正试图在ajax模式下实现jquery ui标签，如http://jqueryui.com/demos/tabs/#ajax所示。唯一的区别是，我的所有标签页面都加载了具有不同参数的同一页面。这在Firefox上完全正常，但它不适用于IE7。有人可以帮忙解决这个问题吗？提前谢谢。

这是我的代码。

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

<script type="text/javascript">
    $(function () {

        $("#tabs").tabs({
            ajaxOptions: {
                error: function (xhr, status, index, anchor) {
                    $(anchor.hash).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. ");
                }
            }
        });


    });
</script>

   <asp:Panel ID="pnlMain" runat="server" >
       <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Preloaded</a></li>
                <li><a href="tabs.aspx?id=1" >Panel 1</a></li>
                <li><a href="tabs.aspx?id=2">Panel 2</a></li>
            </ul>
            <div id="tabs-1">
                <p>Testing JQuery AJAX Tabs.</p>
            </div>

      </div>
</asp:Panel>

<asp:Panel ID="pnlTest1" runat="server" Visible="false">
    <p>Hi this is Test 1.</p>
</asp:Panel>

 <asp:Panel ID="pnlTest2" runat="server" Visible="false">
    <p>Hi this is Test 2.</p>
</asp:Panel>


</form>

protected void Page_Load(object sender, EventArgs e)
{
    string id = "";

    if (Request.QueryString["id"] != null)
    {
        id = Request.QueryString["id"];
    }

    switch (id)
    {
        case "1": pnlMain.Visible = false; pnlTest1.Visible = true; break;
        case "2": pnlMain.Visible = false; pnlTest2.Visible = true; break;
    }

}

Answer 1

最后我想出了问题所在。当我在选项卡中加载相同的页面时，页面上的脚本会重复，这会弄乱页面。我更改了如下所示的脚本以解决此问题。

仅当在页面上呈现主选项卡面板且所有其他面板（div）为空/隐藏时，才会生成选项卡。在这种情况下，选项卡仅在第一次加载主页时生成，当我们在选项卡中加载相同页面但显示页面的不同内容时，它不会生成选项卡的脚本。

<script type="text/javascript">

    $(function () 
    {
        if ($("#pnlTest1").html() == null && $("#pnlTest2").html() == null)
        {
            $("#tabs").tabs({
                cache: false,
                ajaxOptions: {
                    cache: false,
                    error: function (xhr, status, index, anchor) {
                        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. ");
                    }
                }
            });
        }

    });

</script>

JQuery选项卡Ajax在使用不同参数加载相同页面时无法在IE7上运行

1 个答案: