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>