jquery ui選項卡在表單提交後留在選項卡

Question

您好我使用jQuery ui選項卡Widget在頁面上有兩個選項卡。每個頁面都包含一個具有相同頁面作爲操作的表單。 我需要留在提交表單後提交表單的選項卡中。 我該如何做到這一點？

這裏是我的代碼：

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Tab 1</a></li> 
    <li><a href="#tabs-2">Tab 2</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>I'm Tab1.</p> 
     <p>I'm a Form using GET Method, passing values to this same page:<br></p> 
     <p><form name="input" action="index.php" method="GET"> 
     <input type="text" name="value" id="somevalue" style="width:150px;"> <br> 
     </form></p> 
    <? 
    if (isset($_GET)) {echo ($_GET['value']);} 
    ?> 
    </div> 
    <div id="tabs-2"> 
    <p>I'm Tab2.</p> 
    <p>I'm a Form using GET Method, passing values to this same page:<br></p> 
     <p><form name="input" action="index.php" method="GET"> 
     <input type="text" name="value2" id="somevalue" style="width:150px;"> <br> 
     </form></p> 
    <? 
     if (isset($_GET)) {echo ($_GET['value2']);} 
    ?> 
    </div> 

</div> 

在此先感謝。 塞巴斯蒂安

Answer 1

你可以通過使用jQuery.cookie插件來實現這一點。

您需要將選定的標籤索引保存到Cookie中，並在每次頁面加載時讀取這些cookie並選擇適當的選項卡。 保存在裏面activate處理程序選項卡插件的製作（該active期權的價值將被保存）

$("#tabs").tabs({ 
    activate: function(event, ui){ 
     var active = $("#tabs").tabs("option", "active"); 
     $.cookie("activeTabIndex", active); 
    } 
}); 

要選擇在頁面加載所需的標籤，你需要讀取cookie並設置選項卡active選項。 以下是完整的$(document).ready代碼：

$(document).ready(function(){ 
    //initialize tabs plugin with listening on activate event 
    var tabs = $("#tabs").tabs({ 
     activate: function(event, ui){ 
      //get the active tab index 
      var active = $("#tabs").tabs("option", "active"); 

      //save it to cookies 
      $.cookie("activeTabIndex", active); 
     } 
    }); 

    //read the cookie 
    var activeTabIndex = $.cookie("activeTabIndex"); 

    //make active needed tab 
    if(activeTabIndex !== undefined) { 
     tabs.tabs("option", "active", activeTabIndex); 
    } 
}); 

這裏是Demo

（我刪除了form s到使它在的jsfiddle工作;如果你提交你的form後留在同一頁上，它將工作）