表单提交后jquery ui选项卡停留在选项卡上

Question

您好，我在一个带有两个选项卡的页面中使用 jQuery ui tabs 小部件。每个页面都包含一个表单，该表单具有与操作相同的页面。 提交表单后，我需要留在提交表单的选项卡中。 我怎样才能做到这一点？。

这是我的代码：

<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

（我删除了 forms 以使其在 jSFiddle 中工作；如果您在提交 form 后停留在同一页面上，它将起作用）