Question

我有一个非常烦人的问题，因为几天的尝试和googlin＆＃39;我无法解决。周围。

我的表单中有一些标签。
当我进入第三个标签（3/3）并点击提交以更新我的表单时，我总是进入第一个标签。我想留在活动标签页。

这是我的jQuery

$(document).ready(function () {
    /***** intra - Tabs *****/
    $('.intra-tab-content').hide();
    $('.intra-tab-content:first').show();
    $('.intra-tab').click(function () {
        var tabContentId = '#' + $(this).attr('name');
        $('.intra-tab').attr('class', 'intra-tab');
        $(this).attr('class', 'intra-tab intra-tab-bar-actual-tab');
        $('.intra-tab-content').hide();
        $(tabContentId).show();
    });
});

这是我的HTML

<div class="intra-tab-bar">
<ul>
    <li><a href="#" name="tab0" class="intra-tab intra-tab-bar-actual-tab">foo</a>

    </li>
    <li><a href="#" name="tab1" class="intra-tab intra-tab-bar-actual-tab">bar</a>

    </li>
    <li><a href="#" name="tab2" class="intra-tab intra-tab-bar-actual-tab">foobar</a>

    </li>
</ul>

如果有人可以帮助我会很棒。
提前谢谢你 Krtl

Answer 1

点击提交后，页面的默认行为是重新加载，从而导致页面进入初始状态（选项卡1）。

所以有两个机会：

您可以将选定的标签保存在服务器上（例如在会话中）并将其加载到jQuery的预备回拨中
不要让您的网页使用默认行为，而是调用自定义提交回调函数并停止传播：

$("#submit-form").submit(function () { var formData = $(this).serialize(); //jQuery function to get the forms values $.ajax({ url: "url", //forms url type: "POST/PUT/GET/DELETE", //default: get data: formData, success: function(data) { //success callback } }); return false; //stops propagation });

Answer 2

有很多方法可以解决这个问题。 Florian已经建议了最优雅的方式，而不是使用浏览器提交功能，使用ajax定义您自己的提交行为，以防止页面加载。

可替换地：

如果您可以使用local storage，那么您的客户端就是HTML5 基于浏览器，你可以做的是设置一个标签，你可以选择哪个标签喜欢加载页面。使用后清除旗帜。
使用用户所在的最终选项卡将额外参数发回服务器。这样，当您重新加载时，您可以从服务器发回标签ID并重新加载您的页面。这与ajax结合使用，您可以更改客户端上的选项卡以指定服务器错误！

虽然这个答案仅适用于解决问题的更多方法。对于一些有用的东西，去找ajax！

getElementById（）？记住提交/刷新后的最后一个活动选项卡

2 个答案: