重新加载页面时如何保持选项卡处于活动状态？答案

【问题标题】：How to keep tab active when page is reloaded?重新加载页面时如何保持选项卡处于活动状态？
【发布时间】：2016-04-07 08:45:00
【问题描述】：

当点击Save 按钮时，页面会像这样重新加载，并在url 中添加额外的parameter：

window.location.replace('https://www.servis-racunara.net/pages/users.php?new_column_added');

所以，这就是我在 url 中检查天气参数设置的方式：

$(document).ready(function() {
    if (window.location.search.indexOf('new_column_added') > -1) {}
});

所以，页面看起来像这样：

当 url 中有 new_column_added 时（即单击保存按钮时），页面应该重新加载，但标签 Edit User List 应该是活动的，并且他的内容也应该在那里。这就是使用Bootstrap 创建标签的方式：

<ul id="mainTabs" class="nav nav-tabs  users-tabs" role="tablist">
   <li id="glavniUseri" role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">View Users</a></li>
   <li id="editUsers" role="presentation"><a href="#edit-user-list" aria-controls="profile" role="tab" data-toggle="tab">Edit User List</a></li>
   <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Target Groups</a></li>
   <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">API</a></li>
</ul>

这就是我设法使Edit User List 活跃的方法：

$(document).ready(function() {
    if (window.location.search.indexOf('new_column_added') > -1) {
        console.log('radii ovoo');
        $('#glavniUseri').removeClass('active');
        $('#editUsers').addClass('active');
});

但这一切都是为了使Edit User List 处于活动状态，但View Users 选项卡的内容在重新加载后会被加载。我也试过这样做：

$(document).on('load', function () {
            var $link = $('li.active a[data-toggle="tab"]');
            $link.parent().removeClass('active');
            var tabLink = $link.attr('href');
            $('#mainTabs a[href="' + tabLink + '"]').tab('show');
        });

但这也不起作用。我知道以前有人问过类似的问题，但似乎没有一个解决方案适合我的情况。所以，如果你有什么想法，请帮忙，我坚持这个。

【问题讨论】：

浏览器兼容性最低的是什么？如果我在完成 asyc 保存后理解正确，你想修改 url。如果最小浏览器是 IE9，我们可以在不重新加载的情况下做到这一点。
当您提交数据并重新加载页面时，javascript 中的现有功能将被重置。为什么不使用 AJAX？这将允许您在不重新加载页面的情况下将数据提交到外部服务器端文件，这意味着任何当前正在运行的 javascript 都不会停止并重新启动。这也将加快速度，因为客户端不必等待页面再次加载。
我想要的只是当点击保存按钮时，页面重新加载并停留在最后一个活动标签中。
@NewToJS 我正在使用 AJAX（此重新加载来自它的成功部分），但由于其他一些 PHP 部分，我需要此重新加载。
使用 localstograge/cookies 保存状态

标签： javascript jquery twitter-bootstrap

【解决方案1】：

试试这个代码：

$(document).ready(function() {
    if (window.location.search.indexOf('new_column_added') > -1) {
        console.log('radii ovoo');
        $('#glavniUseri').removeClass('active');
        $('#editUsers').addClass('active');
         $('#edit-user-list').parent().find('.active').removeClass('active');
        $('#edit-user-list').addClass('active');
});

或：

$('a[href="#edit-user-list"]').tab('show');

https://jsfiddle.net/w8zjhamu/

【讨论】：