0

我有一个包含选项卡和子选项卡的表单，如下所示：

<div id="tabs">
        <ul>
            <li><a href="#tab_details">Details</a></li>
            <li><a href="#tab_dia">DIA</a></li>
        </ul>
        <div id="tab_details">
            <code>
        </div>
        <div id="tab_dia">
            <div id="dia_sub_tabs">
                <ul>
                    <li><a href="#DIA_details">DIA Details</a></li>
                    <li><a href="#IA_info">IA Information</a></li>
                </ul>
                <div id="DIA_details">
                    <code>
                </div>
                <div id="IA_info">
                    <code>
                </div>
            </div>
        </div>  
    </div>

我使用javascript从我的表单中单击按钮分别保存每个选项卡的数据：

<span><a href="javascript:void(0)" id="save_changes_id" class="button_links">Save Changes</a></span>

JS代码如下：

$("#save_changes_id").click(function() {
    //  To retrieve the current TAB and assign it to a variable ...
    var curTab = $('.ui-tabs-active');      
    var curTabPanelId = curTab.find("a").attr("href");

    if(curTabPanelId == "#tab_dia"){
        var curTab = $('#dia_sub_tabs .ui-tabs-active');
        var curTabPanelId = curTab.find("a").attr("href");
    }
    responseData = doAjaxCall($(curTabPanelId + " form"));

        if(responseData == 1) 
            showMessage('status_msg', 'Project details updated successfully', 'green');
        else
            showMessage('status_msg', 'Error: Please check all the fields', 'red');

});

我想要的是每次单击保存按钮时重新加载页面，并显示我在重新加载后保存的活动选项卡。

我尝试提供 window.location.reload() ，但在重新加载后显示第一个选项卡，而不是之前处于活动状态的选项卡。

请为此提出解决方案。提前致谢。

4

3 回答 3

0

试试这个逻辑

点击保存按钮后你做...

$("#save_changes_id").click(function() {
  // set the active tab id in localStorage against key 'ACTIVE_TAB_ID'

  window.localStorage.setItem('ACTIVE_TAB_ID',yorActiveTabId);//yorActiveTabId is js  varible which contains active tab id.

});

现在重新加载页面后获取活动标签的ID，如......

var activeTabId=window.localStorage.getItem('ACTIVE_TAB_ID');

现在使用 js，您可以使用“activeTabId”添加类以激活选项卡

您可以使用 sessionStorage 而不是 localStorage，但关闭浏览器后您的数据将会丢失，但如果您使用 localStorage，数据将不会丢失。

于 2013-10-29T10:11:53.917 回答
0

如果您重新加载页面，那么您将无法拥有 js 状态，因为它也会被重新加载。在不就 ui 行为联系服务器的情况下执行此操作的一种方法是将活动选项卡作为参数传递给 anchor/window.location.hash 或 url 查询参数。然后从您的 js 中，您可以从 window.location 解析 url 并相应地调整您的 ui。

其他方法可能是使用 cookie、html5 网络存储（本地存储、会话存储）。但是，对于您的情况，我认为最精简和用户友好的（例如可收藏的网址）将是使用网址。

    $(document).ready(function () {

    $(this).parent('li').addClass('ui-tabs-active');
    var activeTab = window.location.hash;
    $('a[href="' + activeTab + '"]').parent('li').addClass('ui-tabs-active');


    $('a').click(function () {
        $('li.ui-tabs-active').removeClass('ui-tabs-active');
        $(this).parent('li').addClass('ui-tabs-active');
    });

    $("#save_changes_id").click(function () {

        var curTab = $('.ui-tabs-active');
        var curTabPanelId = curTab.find("a").attr("href");

        window.location.href = window.location.href.split("#")[0] + curTabPanelId;
        window.location.reload();

        /*
    if(curTabPanelId == "#tab_dia"){
        var curTab = $('#dia_sub_tabs .ui-tabs-active');
        var curTabPanelId = curTab.find("a").attr("href");
    }
    responseData = doAjaxCall($(curTabPanelId + " form"));

        if(responseData == 1) 
            showMessage('status_msg', 'Project details updated successfully', 'green');
        else
            showMessage('status_msg', 'Error: Please check all the fields', 'red');*/

    });
});

看看小提琴，为了清楚起见，与 ajax 相关的代码已被注释掉。活动类在点击时被添加，你可能有一些其他的过程，只是为了演示选择/选项卡的选择以及重新加载后如何处理它。 http://jsfiddle.net/ChTGc/4/show/

于 2013-10-29T09:48:28.263 回答
0

试试这个例子

sessionStorage关闭浏览器时会自动清除。它存储一个会话的数据。

阅读此文档：sessionStorage

于 2013-10-29T10:02:44.743 回答