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

<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>