jQuery UI 选项卡，活动选项卡不会改变

Question

请参阅下面的代码。 ASP.NET MVC 应用程序中使用的代码。当我到达页面时，没问题，我看到了第一个标签内容。我单击第二个选项卡，我看到了第二个选项卡的内容。我回到第一个标签仍然没有问题，但是当我尝试在第二个不起作用时再次进入时，我会留在第一个标签上。

$.post 工作并返回正确的值，但第一个选项卡保持活动状态。

你能帮帮我吗？

谢谢，

<script type="text/javascript">
    $(document).ready(function() {
        var $tabs = $("#tabs").tabs({
            select: function (e, ui) {
                var thistab = ui;
                runMethod(thistab.index);
            }
        });
    });

    function runMethod(thistab) {
        selectedtab = thistab;
        switch (thistab) {
            case 0:
                $.post("/MyController/Action1", { var1: 1, var2: 0 },
                        function (data) {
                            $("#tabs-1").replaceWith(data);
                        }
                 );
                break;
            case 1:
                $.post("/MyController/Action2", { var1: 2, var2: 1 },
                        function (data) {
                            $("#tabs-2").replaceWith(data);
                        }
                 );
                break;
            case 2:
                alert(2);
                break;
        }
    }
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">Tab1</div>
    <div id="tabs-2">Tab2</div>
    <div id="tabs-3">Tab3</div>
</div>

Answer 1

您是否尝试过简单地使用 jquery ui 选项卡的内置 AJAX 功能？

http://jqueryui.com/demos/tabs/#ajax

<div id="tabs">
    <ul>
        <li><a href="/MyController/Action1/?var1=1&var2=0">Tab 1</a></li>
        <li><a href="/MyController/Action2/?var1=2&var2=1">Tab 2</a></li>
    </ul>
</div>

<script type="text/javascript">
    $(document).ready(function() {
    $("#tabs").tabs({ ajaxOptions: { type: "POST" }, cache: false });  //incorporated tobias86's suggestion of setting the cache option
    });
</script>