javascript - 重新加载页面时如何保持选项卡处于事件状态？

Question

当 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');
        });

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

Answer 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/