asp.net - 持久的jQuery选项卡选定的项目不起作用

Question

我将 jQuery UI 的 Tabs 插件与 asp.net (webform) 应用程序一起使用。

由于页面中有一些回发，我想保留当前选项卡。我正在尝试使用以下标记代码，但这不起作用：

<input type="hidden" name="selectedTab" id="selectedTab" value="<%= Page.Request.Form["selectedTab"] %>" />

<script type="text/javascript">
    $(function () {
        $("#ActionTabs")
            .tabs()
            .bind("tabsselect", function (event, ui) {
                $("#selectedTab").val(ui.index);
            })
            .tabs("select", $("#selectedTab").val());

    });
</script>

<div id="ActionTabs">
    <ul>
         <li><a href="#tab1">Tab1</a></li>
         <li><a href="#tab2">Tab2</a></li>
    </ul>
    <div id="tab1">
    </div>
    <div id="tab2">
    </div> 
</div> 

使用开发人员工具，我可以看到我的隐藏 selectedTab 在选择选项卡时设置正确，并且在回发后正确设置，但在页面加载后始终选择第一个选项卡。

我的代码有什么问题？

Answer 1

好的，我找到了另一种声明标签的方法：

<script type="text/javascript">
    $(function () {
        $("#ActionTabs")
            .tabs({
                selected : $("#selectedTab").val(),
                select: function (event, ui) {
                    $("#selectedTab").val(ui.index);
                }
            });

    });
</script>

这一次，它按预期工作。不确定为什么第一个版本不起作用。

Answer 2

我认为由于将两个锚标签链接到同一个 tab1 有问题

<ul>
     <li><a href="#tab1">Tab1</a></li>
     <li><a href="#tab1">Tab2</a></li>
</ul>