这是Demo

Question

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

这是我的代码：

<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并选择相应的标签。保存在tabs插件的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以使其在jSFiddle中正常工作;如果您在提交form之后仍在同一页面上，它将会正常工作）

表单提交后，jquery ui tabs保留在选项卡上

1 个答案:

这是Demo