javascript - zurb Foundation 5.2 - 在 postabck 上维护选项卡选择/状态

Question

我有一个 ASP.NET 项目，其中使用 Foundation 5.2.2 前端。我有一个带有基础选项卡的页面，我想在回发时维护所选选项卡的状态。这些选项卡位于 AJAX 面板内，我为选项卡提供了服务器 ID，以便页面更改 ID 名称。理论上，如果需要，我可以从事件背后的 ASP.NET 代码中分配选定的选项卡。

全面披露，我很少使用 JS，所以请耐心等待。

我通过以下方式绑定(bind)到选项卡事件的基础回调( as outlined in foundation docs here ):

function pageLoad(sender, args) { 
    $(document).foundation({
        tab: {
            callback: function (tab) {
                var selectedTab = $('#tabs').tabs('option', 'active');
                $("#<%=currentTab.ClientID%>").val(selectedTab);
            }               
        }
    });       
}

我需要使用pageload事件，因为pageLoad是在每次回发之后执行的，同步或异步。另外，pageLoad 是 ASP.NET AJAX 中为此目的保留的函数名称。

我的想法是在页面上放置一个隐藏字段来保存当前选项卡选择:

<asp:HiddenField runat="server" ID="currentTab" Value="0" />

但是当回调发生时，所选选项卡 ID 不会分配给隐藏字段，而是分配以下内容:

[对象对象]

<input type="hidden" name="dnn$ctr2601$StoreManagement$currentTab" id="dnn_ctr2601_StoreManagement_currentTab" value="[object Object]">

问题

我需要这里的一些帮助，如何获取所选选项卡 ID 或值，然后如何重新分配该值？

感谢任何帮助。

我知道这个问题Zurb-Foundation Maintain Tab State但它使用旧版本的基础，我想使用内置回调

标签 HTML

<div class="row">
    <div class="large-12 columns">
        <asp:HiddenField runat="server" ID="currentTab" Value="0" />

        <dl class="tabs" id="MyTabs" data-tab>
            <dd id="Tab2" runat="server" class="active">
                <asp:HyperLink runat="server" ID="Tab2Link">Categories</asp:HyperLink></dd>
            <dd id="Tab3" runat="server">
                <asp:HyperLink runat="server" ID="Tab3Link">Status</asp:HyperLink></dd>
            <dd id="Tab4" runat="server">
                <asp:HyperLink runat="server" ID="Tab4Link">Specifications</asp:HyperLink></dd>
            <dd id="Tab5" runat="server">
                <asp:HyperLink runat="server" ID="Tab5Link">Manufacturers</asp:HyperLink></dd>
            <dd id="Tab6" runat="server">
                <asp:HyperLink runat="server" ID="Tab6Link">Suppliers</asp:HyperLink></dd>
            <dd id="Tab1" runat="server">
                <asp:HyperLink runat="server" ID="Tab1Link">Terms</asp:HyperLink></dd>
        </dl>
        <div class="tabs-content">
            <div class="content active" id="panel2" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel3" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel4" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel5" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel6" runat="server">
                ...Tab content
            </div>
            <div class="content" id="panel1" runat="server">
                ...Tab content
            </div>
        </div>
    </div>
</div>

选项卡中的超链接在 asp.net 页面的代码后面设置了其 href 属性 - 它获取面板的 clientid 并在前面添加 #。选项卡工作和切换都很好，我只需要在回发过程中保持状态即可。

Answer 1

看起来如果您将 data-options="deep_linking: true" 添加到类似的内容中:

<dl class="tabs" id="MyTabs" data-tab data-options="deep_linking: true">

它会将选项卡面板 ID 添加到选项卡拾取的窗口哈希中，因此在回发时会读取 url，并使用哈希来重新分配最后选择的选项卡。

比 JavaScript 解决方案简单得多。

注意:

如果您从数据选项中删除 deep_linking 选项，这将不起作用