單擊按鈕重新加載選項卡

Question

我有一個包含選項卡和子選項卡的表單，如下所示：

<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（），但是在重新加載后顯示第一個選項卡，而不顯示之前處於活動狀態的選項卡。

請為此提出解決方案。 提前致謝。

Answer 1

如果您重新加載頁面，那么您將無法具有js狀態，因為它也會被重新加載。 一種無需聯系服務器就ui行為進行聯系的方法是將active選項卡作為參數傳遞給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/

Answer 2

試試這個例子

關閉瀏覽器后，會自動清除sessionStorage 。 它存儲一個會話的數據。

閱讀此文檔： sessionStorage

Answer 3

試試這個邏輯，

單擊保存按鈕后，您將...

$("#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，則數據將不會終身丟失。