1

2 つのタブを持つ jquery-ui タブ コンポーネントがあります。

<div id="tabs">
  @Html.Hidden("SelectedTabId")
  <ul>
    <li><a href="#Tab-1">Tab1</a></li>
    <li><a href="#Tab-2">Tab2</a></li>
  </ul>
  <div id="Tab-1">
  </div>
  <div id="Tab-2">
  </div>
</div>

Tab-2 にいるとき、何らかの条件が発生したときに、tab-2 の一部のフィールド (@Html.TextBoxFor) がプログラムによって自動的に更新されるようにするいくつかのことを行います。したがって、それが発生した後 (フィールドが更新された後)、ページがリロードされます。ページがリロードされた後、最初のタブ Tab-1 がアクティブになっていますが、ページがリロードされる前にアクティブだった Tab-2 をアクティブにしたいです。

現在アクティブなタブを保持する非表示フィールド SelectedTabId (上記のコードを参照) を使用しているため、アクティブなタブのタブ インデックスで更新し、この値を要求してページをリロードした後に正しいタブをアクティブにしています。以下のコードを参照してください。

<script type="text/javascript">
        $(function () { 
            $("#tabs").tabs({ active: $('#SelectedTabId').val()});
        }

        $(document).ready(function () {
            var tabs = $("#tabs").tabs({
                beforeActivate: function (event, ui) {
                    $('#SelectedTabId').val(ui.newTab.index());
                }
            });
        }
</script>

ページがリロードされた後も以前のアクティブなタブをアクティブに保ちたいのですが、機能していません。何が間違っていますか?

jQuery-ui 1.10.2 を使用しています

4

2 に答える 2

5

ブラウザのsessionStorageを使用してタブ インデックスを保存し、

このようなもの：

$(document).ready(function () {
    var currentTabIndex = "0";

    $tab = $("#tabs").tabs({
         activate : function (e, ui) {
            currentTabIndex = ui.newTab.index().toString();
            sessionStorage.setItem('tab-index', currentTabIndex);
         }
    });

    if (sessionStorage.getItem('tab-index') != null) {
        currentTabIndex = sessionStorage.getItem('tab-index');
        console.log(currentTabIndex);
        $tab.tabs('option', 'active', currentTabIndex);
    }
    $('#btn-sub').on('click', function () {
        sessionStorage.setItem("tab-index", currentTabIndex);
        //window.location = "/Home/Index/";
    });
});

これにより、タブの変更時に sessionStorage が更新されます。条件を使用してタブを更新してみてください。お役に立てば幸いです。

ここにローカルストレージのデモがあります

を使用して sessionStorage を削除できますsessionStorage.removeItem('tab-index');

sessionStorageブラウザを閉じると自動的にクリアされます。とほとんど同じように機能しlocalStorageます。

これがsessionStorageのデモです

于 2013-10-23T12:17:02.207 に答える