jquery tabs - 在选项卡内导航保存选项卡内容

Question

我有一个使用 jquery 选项卡控件的网页。在此页面中，选项卡是根据用户选择的内容动态生成的。这些选项卡显示我的 Web 应用程序中的页面内容。例如，用户选择“库存”类别，然后选择“项目”选项，并在新选项卡中加载“库存 - >项目”网页。在“项目”页面中，用户可以单击链接，将选项卡导航到我的网络应用程序中的不同网页（例如：编辑项目）。如果用户单击不同的选项卡（例如“订单”选项卡）然后返回到他的“项目”选项卡，它会将选项卡刷新到选项卡在新创建时加载的页面，而不是用户上次所在的位置他离开了标签。

如何保留用户离开选项卡时所在的位置，比如编辑项目？

我正在使用 MVC 4 Razor 和 jquery。

为了更清楚，请参阅下面的完整 html：

<script>
    debugger;
    $(document).ready(function () {
        var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
            tabCounter = 2;

        var tabs = $("#tabs").tabs();

        $("#open_module").button().on("click", function () {
            $("#dialog").dialog("open");
        });

        // Modal dialog init: custom buttons and a "close" callback resetting the form inside
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Add: function () {
                    addTab();
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                form[0].reset();
            }
        });

        // AddTab form: calls addTab function on submit and closes the dialog
        var form = $("#dialog").find("form").on("submit", function (event) {
            addTab();
            $("#dialog").dialog("close");
            event.preventDefault();
        });

        // Actual addTab function: adds new tab using the input from the form above
        function addTab() {
            var e = document.getElementById("page-links");
            var link = e[e.selectedIndex].value;
            var tabTitle = e[e.selectedIndex].text;
            var tabContent = "<object type='text/html' data='" + link + "' width='800px' height='600px' style='overflow:hidden;'/>";
            var label = tabTitle || "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), tabContentHtml = tabContent || "Tab " + tabCounter + " content.";

            tabs.find(".ui-tabs-nav").append(li);
            tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
            tabs.tabs("refresh");
            tabCounter++;
        }

        // Close icon: removing the tab on click
        tabs.on("click", "span.ui-icon-close", function () {
            var panelId = $(this).closest("li").remove().attr("aria-controls");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
        });

        tabs.on("keyup", function (event) {
            if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
                var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
                $("#" + panelId).remove();
                tabs.tabs("refresh");
            }
        });

        
    });

    function LoadLinks(category) {
        var url = "/Home/LoadLinks/";
        var e = document.getElementById("categories");
        var _custid = e[e.selectedIndex].value;
        $("#page-links").empty();

        $.ajax({
            url: url,
            data: { cat: category },
            cache: false,
            type: "POST",
            success: function (data) {
                $.each(data, function (i, data) {
                    $("#page-links").append('<option value="' + data.Value + '">' + data.Text + '</option>');
                });
            },
            error: function (reponse) {
                alert("error : " + reponse);
            }
        });
        return false;
    }

</script>

@{
    ViewBag.Title = "my title";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                
            </p>
        </div>
    </section>
}
<button id="open_module">Open Module</button>

<div id="dialog" title="Open Module">
  <form>
    <fieldset class="ui-helper-reset">
        <legend>PageSelector</legend>
        <label id="category-label">Category</label>
        <select id="categories" onchange="javascript:LoadLinks(this.value);">
            <option value="0">Select one...</option>
            <option value="Inventory">Inventory</option>
            <option value="CustomerManagement">Customer Management</option>
            <option value="VendorManagement">Vendor Management</option>
            <option value="Invoicing">Invoicing</option>
            <option value="Receiving">Receiving</option>
            <option value="Purchasing">Purchasing</option>
            <option value="Human Resources">Human Resources</option>
            <option value="OrderEntry">Order Entry</option>
        </select>
        <select id="page-links">
            <option value="value">Select a category...</option>
        </select>
    </fieldset>
  </form>
</div>

<div id="tabs">

    <ul>
        <li class="current"><a href="#tabs-1">About</a></li>
    </ul>

        <div id="tabs-1">
            <object type="text/html" data="/Home/About" width="800px" height="600px" style="overflow:hidden;"/>
        </div>

</div>

Answer 1

所以答案是，Chrome 就是问题所在。从 IE 和 FireFox 打开时，该网站按预期工作，只是 Chrome 无法正常运行。很遗憾，我最喜欢 chrome :(

由于某种原因，Chrome 会在您单击该选项卡时重新加载它，从而导致默认页面被打开。当您使用 IE 或 FireFox 时，它不会在单击时重新加载选项卡。所以现在我知道为什么有些网站是特定于浏览器的:)