php - 在该选项卡中单击分页链接时如何激活选项卡？

Question

当用户访问“http://proj.test/user/profile?user=1”时，他会进入如下所示的页面，该页面有 3 个选项卡，一个供用户编辑他的帐户，另一个(我的票)供用户访问有关他在大会和其他方面的注册信息(我的 session )供用户访问他创建的 session 信息。访问此页面时的默认选项卡是“编辑用户帐户”。

tab1 内容供用户编辑个人资料。当用户点击“更新”时，代码会转到 UserController 以更新用户信息。

当用户点击tab2(My Tickets)时，这个tab的内容如下图。它显示了用户在大会上的注册情况。在此选项卡内容中，还显示 2 个选项卡供用户显示他在已经完成的大会中的注册，另一个选项卡显示他在尚未执行的大会中的注册。

如果有超过 5 个结果，则有分页，当用户更改为链接“2”时，他会转到“http://proj.test/user/profile?page=2”。

当用户点击选项卡3(我的 session )时，该选项卡的内容如下所示。它显示了用户创建的 session 。在此选项卡内容中，它还显示 3 个选项卡，一个(草案)供用户显示由他创建的 session ，其“状态”列为“D”，另一个(已发布)显示由用户创建的 session 具有“状态”列为“P”和其他(已存档)以显示用户创建的已经结束的 session 。

如果有超过 5 个结果，则有分页，当用户更改为链接“2”时，他会转到“http://proj.test/user/profile?page=2”。

疑问:

此上下文的问题是，当在某些选项卡中单击分页链接时，例如，如果用户在“我的 session ”选项卡内的“草稿”选项卡中，并单击分页链接“2”， url 更改为“http://proj.test/user/profile?page=2”，但第一个激活的选项卡是“编辑用户帐户”选项卡。那么如果用户点击“My Congresses”会出现第2页的结果，但用户需要手动点击“My Congresses”。

在这种情况下，您知道如何在单击“我的 session ”选项卡中的分页页面链接时激活“我的 session ”选项卡吗？

此页面上显示所有选项卡的完整代码:

<ul class="nav nav-pills" role="tablist">
    <li class="">
        <a class="nav-link active" href="#updateUserInfo" data-toggle="tab" role="tab">Edit user account</span></a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#myCongresses" data-toggle="tab" role="tab">My Congresses</span></a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#myTickets" data-toggle="tab" role="tab">My Tickets</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active clearfix" id="updateUserInfo" role="tabpanel" aria-labelledby="home-tab">
        <form method="post" action="{{route('user.updateUserInfo')}}" class="clearfix">
            {{csrf_field()}}
            <div class="form-row">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" value="{{$user->name}}" name="name" class="form-control" id="name" >
                </div>
               <!--other form fields-->
            <input type="submit" class="btn btn-primary btn" value="Update"/>
        </form>
    </div>

    <div class="tab-pane clearfix fade" id="myCongresses" role="tabpanel" aria-labelledby="contact-tab">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active border" href="#draftCongresses" data-toggle="tab"
                       role="tab">Draft</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link border" href="#publishedCongresses" data-toggle="tab"
                       role="tab">Published</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link border" href="#archivedCongresses" data-toggle="tab"
                       role="tab">Archived</a>
                </li>
            </ul>
        <div class="tab-content bg-white" id="myTabContent">
            <div class="tab-pane fade active show clearfix" id="draftCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group">
                    @foreach($draftCongresses as $draftCongress)
                        @if(!empty($draftCongress))
                            <li class="list-group-item">
                                <p>{{$draftCongress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{$draftCongress->name}}</h5>
                                <a href="{{route('congress.edit', ['id' => $draftCongress->id])}}" class="btn">Edit Congress</a>
                            </li>
                        @endif
                    @endforeach
                </ul>
                <div class="text-center d-flex justify-content-center mt-3">
                    {{$draftCongresses->links(("pagination::bootstrap-4"))}}
                </div>
            </div>

            <div class="tab-pane fade show clearfix" id="publishedCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group">
                    @foreach($publishedCongresses as $publishedCongress)
                        @if(!empty($publishedCongress))
                            <li class="list-group-item">
                                <p>{{$publishedCongress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{$publishedCongress->name}}</h5>
                                <a href="{{route('congress.edit', ['id' => $publishedCongress->id])}}"
                                   class="btn btn-outline-primary">Edit Congress</a>
                            </li>
                        @endif
                    @endforeach
                </ul>
                <div class="text-center d-flex justify-content-center mt-3">
                    {{$publishedCongresses->links(("pagination::bootstrap-4"))}}
                </div>
            </div>

            <div class="tab-pane fade show clearfix" id="archivedCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group">
                    @foreach($archivedCongresses as $archivedCongress)
                        @if(!empty($archivedCongress))
                            <li class="list-group-item">
                                <p> {{$archivedCongress->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{$archivedCongress->name}}</h5>
                                <a href="{{route('congress.edit', ['id' => $archivedCongress->id])}}"
                                   class="btn btn-outline-primary">Edit Congress</a>
                            </li>
                        @endif
                    @endforeach
                </ul>

                <div class="text-center d-flex justify-content-center mt-3">
                    {{$archivedCongresses->links(("pagination::bootstrap-4"))}}
                </div>
            </div>
        </div>
    </div>


    <div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab">

        <div class="d-flex mb-3">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active border" id="nextCongresses" href="#nextCongresses" data-toggle="tab" role="tab">Next Congresses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link border" id="pastCongresses" href="#pastCongresses" data-toggle="tab" role="tab">Past Congresses</a>
                </li>
            </ul>
        </div>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="nextCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group" id="nextCongressesContainer">
                    @foreach($nextRegistrations as $nextRegistration)
                        @if(!empty($nextRegistration->congress || !empty($nextRegistration->congress->start_date)))
                            <li class="list-group-item">
                                <p>{{optional($nextRegistration->congress)->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{optional($nextRegistration->congress)->name}}</h5>
                                <p> Registration in {{optional($nextRegistration->congress)->created_at }}</p>
                            </li>
                        @endif
                    @endforeach
                </ul>

                <div class="text-center d-flex justify-content-center mt-3">
                    {{$nextRegistrations->links(("pagination::bootstrap-4"))}}
                </div>

            </div>

            <div class="tab-pane fade show" id="pastCongresses" role="tabpanel" aria-labelledby="home-tab">
                <ul class="list-group" id="pastCongressesContainer">
                    @foreach($pastRegistrations as $pastRegistration)
                        @if(!empty($pastRegistration->congress || !empty($pastRegistration->congress->start_date)))
                            <li class="list-group-item">
                                <p>{{optional($pastRegistration->congress)->start_date->formatLocalized('%a, %b %d, %Y - %H:%M')}}</p>
                                <h5>{{optional($pastRegistration->congress)->name}}</h5>
                                <p> Registration in   {{$pastRegistration->created_at}}</p>
                            </li>
                        @endif
                    @endforeach
                </ul>

                <div class="text-center d-flex justify-content-center mt-3">
                    {{$pastRegistrations->links(("pagination::bootstrap-4"))}}
                </div>
            </div>
        </div>
    </div>
</div>

用户 Controller :

class UserController extends Controller
{
    public function index(Request $request){

        $pageLimit = 5;

        $user = $request->user();

        $pastRegistrations = $user->registrations()->with(['congress' => function ($query) {
            $query->where('end_date', '<', now());
        }])->paginate($pageLimit);

        $nextRegistrations = $user->registrations()->with(['congress' => function ($query) {
            $query->where('end_date', '>', now());
        }])->paginate($pageLimit);

        $draftCongresses = $user->congresses()->where('status','D')->paginate($pageLimit);
        $pastCongresses = $user->congresses()->where('end_date','<', now())->paginate($pageLimit);
        $publishedCongresses = $user->congresses()->where('status','P')->paginate($pageLimit);

        return view('users.index',
            compact('user', 'pastRegistrations','nextRegistrations', 'draftCongresses', 'pastCongresses', 'publishedCongresses'));
    }
}

问题示例

如果点击这里的分页链接“2”:

不是像上图那样显示“我的 session ”选项卡处于事件状态但分页链接“2”处于事件状态而不是分页链接“1”处于事件状态的页面，而是显示具有默认事件选项卡“编辑”的页面用户帐户”:

Answer 1

由于您使用的是 Bootstrap 选项卡，因此您需要将正确的片段附加到分页链接以保持事件选项卡。

例如你可以这样做

{{ $draftCongresses->fragment('myCongresses')->links("pagination::bootstrap-4") }}

您可以查看文档 here