Laravel项目中Ajax跳转后如何激活指定Bootstrap tab标签页

实现方案 #

1. 修改Ajax的success回调逻辑 #

重定向时在URL末尾追加第二个tab对应的锚点#profile，用于标识需要激活第二个tab，修改后的代码如下：

$(".Visibilite").click(function (e) {
       e.preventDefault();
       var ele = $(this);
        $.ajax({
            url: '{{ url('change-visibility') }}',
            method: "post",
            cache: false,
            data: {_token: '{{ csrf_token() }}', produit_id: ele.attr("data-id"), status: ele.attr("data-status")},
            success:function(data) {
               // 重定向地址追加第二个tab的锚点
               window.location.replace('{{ url("NouveauProduits") }}#profile');
            }
        });
    });

2. 在tab所在视图添加锚点识别逻辑 #

页面加载时读取URL的锚点，匹配到对应锚点后自动激活指定tab，将以下代码添加到tab所在视图的JS区域即可：

$(function(){
    // 读取URL锚点
    var currentHash = window.location.hash;
    if(currentHash === '#profile'){
        // 触发Bootstrap tab激活方法，自动处理active类切换和内容显示
        $('#profile-tab').tab('show');
    }
})

说明 #

你现有的tab结构不需要做任何修改，只要确保第二个tab对应的内容区块id为profile（和tab的href属性匹配，Bootstrap默认tab结构都符合这个规则）即可正常生效。

内容的提问来源于stack exchange，提问作者youss