Ajax 在按钮提交上更改链接的类名

Question

我有四个菜单选项卡。其中一个选项卡是提交表单（默认），第二个选项卡包含条目列表，每个条目都有一个名为更改状态的按钮。当我单击“更改状态”时，我使用 ajax 调用 windows.reload 来更新页面而不刷新，但选项卡将返回到默认选项卡，即第一个选项卡。现在我的问题是如何将 menutab 类更新为当前选定的菜单以成为活动菜单。下面是我的ajax代码：

<input type="button" value="change status"> // a button to click to change status

<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked

<script>
$(document).ready(function() { 
    $(".closeBTN").click(function() {

    var data = $(this).attr('id');
    //alert (data);
    $.ajax( {
        type: "POST",
        url: "../deals_status_update.php",
        data: { 'id': data }
    }).done(function(msg) {
        $("#notification").html(msg);           
        window.setTimeout(function(){
            location.reload()

            $('#itrade .active').removeClass().addClass('nonactive');
            $('#iopendeals .nonactive').removeClass().addClass('active');
        },100)          
    });
});
});        
</script>

Answer 1

location.reload() 会重新加载网站，所以之后你就不能使用 jQuery 方法了。

也许window.location.hash可以帮助你。

添加哈希并在网站重新加载后解析此哈希以触发您的类？

Answer 2

尝试使用 location.hash，因为解释 location.reload() 实际上会刷新页面，但我仍然不明白为什么需要刷新页面来更新数据！

<input type="button" value="change status"> // a button to click to change status

<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked

<script>
$(document).ready(function() { 
    $(".closeBTN").click(function() {    
        var data = $(this).attr('id');

        $.ajax( {
            type: "POST",
            url: "../deals_status_update.php",
            data: { 'id': data }
        }).done(function(msg) {
            $("#notification").html(msg);           
            window.setTimeout(function(){
                location.hash = 'iopendeals';
                location.reload();
            },100)          
        });
    });

    if(location.hash != '') {
        $('.active').removeClass().addClass('nonactive');
        $(location.hash + ' .nonactive').removeClass().addClass('active');
    }
});        
</script>

Answer 3

您正在重新加载页面，因此稍后发生的任何 JavaScript 都将失去其状态。 DOM 修改仅适用于当前页面会话。一旦导航离开或重新加载，它们就会失去进度。

您是否考虑过不重新加载？你为什么要重新加载？

或者，

您是否可以在客户端进行这些更改，而不是重新加载，而是使用不同的 GET 参数重定向到同一页面？

<li class="menuitem<?=$_GET['page'] == 'homepage' ? ' active' : ''?>">
    Homepage
</li>