Laravel中使用Bootstrap v4实现重载后跳转至原标签页

嘿，作为Laravel新手遇到这个问题很正常，其实你的思路完全对——用URL锚点（hash）来记录当前标签页就搞定了，咱们分几步来改代码：

第一步：给所有表单添加隐藏字段，记录当前标签页 #

在每个标签页里的<form>标签内，都加上一个隐藏输入框，用来提交当前激活的标签页锚点：

<!-- 第一个标签页的表单 -->
<form action="{{ route('updateProductCondition', 'shop') }}" method="POST" enctype="multipart/form-data">
    @csrf
    {{ @method_field('PATCH') }}
    <!-- 添加这行隐藏字段 -->
    <input type="hidden" name="current_tab" value="">
    <!-- 其他表单内容不变 -->
</form>

<!-- 第二个标签页的表单 -->
<form action="{{ route('storeProductSubmit') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <!-- 添加这行隐藏字段 -->
    <input type="hidden" name="current_tab" value="">
    <!-- 其他表单内容不变 -->
</form>

<!-- 第三个标签页的表单同理 -->
<form action="{{ route('storeProductCoupon') }}" method="POST" enctype="multipart/form-data">
    @csrf
    {{ !empty($article)? @method_field('PATCH') : '' }}
    <!-- 添加这行隐藏字段 -->
    <input type="hidden" name="current_tab" value="">
    <!-- 其他表单内容不变 -->
</form>

第二步：添加JavaScript处理标签切换和页面加载逻辑 #

在你的@section('script')里，替换成下面的代码——这段脚本会在切换标签时更新URL锚点，同时更新所有表单的隐藏字段；页面加载时自动读取URL锚点，激活对应的标签页：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    // 1. 切换标签时更新URL锚点和表单隐藏字段
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var activeTabHref = $(e.target).attr('href'); // 获取当前标签的锚点，比如#shop-condition
        window.location.hash = activeTabHref; // 更新URL的锚点
        $('input[name="current_tab"]').val(activeTabHref); // 更新所有表单的隐藏字段值
    });

    // 2. 页面加载时，根据URL锚点激活对应的标签页
    var currentHash = window.location.hash;
    if (currentHash) {
        // 找到对应锚点的标签页链接，触发激活
        $('a.nav-link[href="' + currentHash + '"]').tab('show');
    }
});
</script>

第三步：修改控制器方法，重定向时带上锚点 #

打开处理这些表单提交的控制器（比如对应updateProductCondition、storeProductSubmit、storeProductCoupon的方法），在重定向的时候加上当前的锚点：

比如处理updateProductCondition的方法：

public function updateProductCondition(Request $request)
{
    // 这里是你原来处理表单提交的逻辑，比如验证、保存数据...

    // 获取提交过来的当前标签页锚点，默认值设为第一个标签页的锚点
    $currentTab = $request->input('current_tab', '#shop-condition');
    
    // 重定向回原页面，并带上锚点
    return redirect()->back()->withFragment($currentTab);
}

处理storeProductSubmit的方法同理：

public function storeProductSubmit(Request $request)
{
    // 原来的表单处理逻辑...

    $currentTab = $request->input('current_tab', '#order-submit');
    return redirect()->back()->withFragment($currentTab);
}

这样不管是刷新页面，还是提交表单后重定向回来，页面都会自动跳转到之前所在的标签页啦！

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