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>