Laravel Blade：点击标签内分页链接保持对应标签激活的问题

当前存在两个核心问题：

1. 分页链接仅携带page参数，未记录当前分类ID，页面刷新后无法识别需激活的标签页；
2. 所有分类共用同一个page参数，导致切换标签页时，显示的是该page对应的数据，而非各分类独立的分页状态。

1. 控制器修改：独立处理分类分页，传递激活状态 #

修改控制器，接收URL中的分类ID参数，为每个分类设置独立的分页参数名，并将当前激活的分类ID传递到视图：

public function ListAllFragement(Request $request)
{
    $getcategory = Category::get();
    // 默认激活第一个分类，或从URL取当前分类ID
    $activeCategoryId = $request->get('category_id', $getcategory->first()?->id ?? 0);
    
    $gethistory = UserGetHistory::where('users_id', Auth::user()->id ?? "")->get();
    $dd = !empty($gethistory) ? $gethistory->toArray() : [];

    $categories = Category::all();
    $data = [];

    foreach ($categories as $category) {
        // 为每个分类设置独立的分页参数（page_分类ID），避免参数冲突
        $data[$category->id] = Skin::where('category_id', $category->id)
            ->paginate(3, ['*'], 'page_' . $category->id)
            // 分页链接附加当前激活的分类ID
            ->appends(['category_id' => $activeCategoryId])
            ->toArray();
    }

    return view('listall')
        ->with('cate', $getcategory)
        ->with('gethistory', $dd)
        ->with('data', $data)
        ->with('activeCategoryId', $activeCategoryId);
}

2. 视图修改：动态激活标签页，修正分页逻辑 #

标签按钮激活逻辑 #

不再默认只激活第一个标签，而是根据activeCategoryId判断：

<ul class="nav nav-filter gap-3 justify-content-start justify-content-xl-center" role="tablist">
    @foreach ($cate as $item)
        <li class="nav-item" role="presentation">
            <button class="cmn-btn @if($item['id'] == $activeCategoryId) active @endif" 
                    id="tab-{{$item['id']}}" 
                    data-bs-toggle="tab"
                    data-bs-target="#id{{$item['id']}}" 
                    type="button" 
                    role="tab"
                    aria-controls="id{{$item['id']}}" 
                    aria-selected="{{$item['id'] == $activeCategoryId ? 'true' : 'false'}}">
                {{$item['name']}}
            </button>
        </li>  
    @endforeach
</ul>

标签页内容激活逻辑 #

同样根据activeCategoryId设置标签页的激活状态：

<div class="tab-content compete-in">
    @foreach ($cate as $item)
        <div class="tab-pane fade @if($item['id'] == $activeCategoryId) show active @endif" 
             id="id{{$item['id']}}" 
             role="tabpanel" 
             aria-labelledby="tab-{{$item['id']}}">
            <!-- 产品列表内容 -->
            <!-- 分页组件 -->
        </div>                 
    @endforeach         
</div>

标签页点击同步URL参数 #

添加JS代码，点击标签页时更新URL中的category_id参数，确保分页时能保留当前分类状态：

document.querySelectorAll('.nav-filter .nav-item button').forEach(btn => {
    btn.addEventListener('click', function() {
        const categoryId = this.id.replace('tab-', '');
        const url = new URL(window.location);
        url.searchParams.set('category_id', categoryId);
        // 切换分类时重置该分类的分页到第一页
        url.searchParams.set('page_' + categoryId, 1);
        window.history.pushState({}, '', url);
    });
});

• 用page_分类ID作为每个分类的独立分页参数，避免不同分类的分页状态互相干扰；
• 分页链接始终携带category_id参数，确保页面刷新后能识别并激活对应标签页；
• 通过控制器传递的activeCategoryId，在视图中动态判断标签页的激活状态，替代默认的首个标签激活逻辑。

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