那些遇到过的问题

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

5 php jquery laravel bootstrap-4

当用户访问" http://proj.test/user/profile？user = 1 "时,他会进入如下页面,其中有3个选项卡,一个用于用户编辑他的帐户,另一个用于我的用户(我的门票)访问有关他在大会和其他(我的大会)中注册的信息,以便用户访问他创建的大会的信息.此页面访问"编辑用户帐户"时的默认选项卡.

在此输入图像描述

tab1内容​​供用户编辑他的个人资料.当用户单击"更新"时,代码将转到UserController以更新用户信息.

当用户单击tab2(我的票证)时,此选项卡的内容如下所示.它显示了用户会议中的注册.在此选项卡内容中,它还显示2个选项卡,供用户在已完成的会议中显示其注册,其他选项卡显示其在尚未执行的会议中的注册.

然后有分页,如果有超过5个结果,当用户改为链接"2"时,他转到" http://proj.test/user/profile？page = 2 ".

在此输入图像描述

当用户单击tab3(我的会议)时,此选项卡的内容如下所示.它显示了用户创建的大会.在此选项卡内容中,它还显示3个选项卡,一个(草稿)供用户显示由他创建的具有"状态"列为"D"的会议,其他(已发布)显示由用户创建的会议列"状态"为"P",其他(已存档)显示已完成的用户创建的大会.

然后有分页,如果有超过5个结果,当用户改为链接"2"时,他转到" http://proj.test/user/profile？page = 2 ".

在此输入图像描述

怀疑:

此上下文的问题是,当在某个选项卡中单击分页链接时,例如,如果用户位于"我的会议"选项卡内的"草稿"选项卡中,并且在分页链接"2"中单击,则该URL将更改为" http://proj.test/user/profile？page = 2 "但是第一个变为活动的标签,即"编辑用户帐户"标签.然后,如果用户点击"我的会议",则会显示第2页的结果,但用户需要手动点击"我的会议".

在"我的大会"标签中单击分页页面链接时,您知道如何转动,在这种情况下,"我的国会"标签处于活动状态吗？

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

<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>
Run Code Online (Sandbox Code Playgroud)

UserController的:

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'));
    }
}
Run Code Online (Sandbox Code Playgroud)

问题示例

如果点击分页链接"2":

在此输入图像描述

而不是像上面的图像一样显示"My Congresses"选项卡的页面,但是激活了分页链接"2"而不是激活的分页链接"1",它会使用默认的活动选项卡"编辑用户帐户"来显示页面:

在此输入图像描述

Sal*_* CJ 0

改变这些：

{{$draftCongresses->links(("pagination::bootstrap-4"))}}
{{$publishedCongresses->links(("pagination::bootstrap-4"))}}
{{$archivedCongresses->links(("pagination::bootstrap-4"))}}
{{$nextRegistrations->links(("pagination::bootstrap-4"))}}
{{$pastRegistrations->links(("pagination::bootstrap-4"))}}
Run Code Online (Sandbox Code Playgroud)

..到这些：（即添加相应的链接片段）

{{$draftCongresses->fragment('draftCongresses')->links(("pagination::bootstrap-4"))}}
{{$publishedCongresses->fragment('publishedCongresses')->links(("pagination::bootstrap-4"))}}
{{$archivedCongresses->fragment('archivedCongresses')->links(("pagination::bootstrap-4"))}}
{{$nextRegistrations->fragment('nextCongresses')->links(("pagination::bootstrap-4"))}}
{{$pastRegistrations->fragment('pastCongresses')->links(("pagination::bootstrap-4"))}}
Run Code Online (Sandbox Code Playgroud)

然后将此 JavaScript/jQuery 脚本添加到页面中：

<script>
jQuery( function( $ ){
    // List of tab IDs.
    var tabs = {
    // PARENT_TAB_ID: [ 'ID_OF_DIRECT_CHILD_TAB', 'ID_OF_DIRECT_CHILD_TAB', ... ]
        updateUserInfo: [],
        myCongresses: [ 'draftCongresses', 'publishedCongresses', 'archivedCongresses' ],
        myTickets: [ 'nextCongresses', 'pastCongresses' ]
    };

    // Default tab's ID.
    var default_tab = 'updateUserInfo';

    function showTab( parent_id, child_id ) {
        $( 'a[data-toggle="tab"][href="#' + parent_id + '"]' ).first().click();

        if ( child_id ) {
            $( 'a[data-toggle="tab"][href="#' + child_id + '"]' ).first().click();
        }
    }

    $( window ).on( 'load hashchange', function(){
        var tab_id = location.hash || '';

        // Remove the hash (i.e. `#`)
        tab_id = tab_id.substring(1);

        if ( tab_id && tabs[ tab_id ] ) {
            showTab( tab_id );
        } else if ( tab_id ) {
            $.map( tabs, function( child_ids, parent_id ){
                if ( $.inArray( tab_id, child_ids ) > -1 ) {
                    showTab( parent_id, tab_id );
                }
            } );
        } else {
            showTab( default_tab );
        }
    } );
} );
</script>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

884 次

最近记录：

7 年，5 月 前
相关归档
如何使PHPStorm在文件打开时折叠所有方法/功能？ 60
PHP Random Shuffle Array维护Key => Value 43
检查字符串是否包含多个特定单词 40
带有远程模态的Bootstrap 4 30
Laravel中存储库和接口的用法是什么？ 25
使用jQuery UI选项卡.如何将其中一个标签链接到URL而不是加载标签面板？ 20
Laravel 4,一个模型的多重多态关系 7
Laravel:使用Memcache而不是Filesystem 5
Laravel 5.7 - 队列作业太慢 5
laravel sanctum SPA 身份验证受保护的路由返回 { "message" : "unauthenticated"} 5
难疑归档
你如何创建一个远程Git分支？ 3030
403 Forbidden vs 401 Unauthorized HTTP响应 2544
为什么我不应该在PHP中使用mysql_*函数？ 2432
HTML中id属性的有效值是什么？ 1945
如何在Java中连接两个数组？ 1299
在Node.js中读取环境变量 1240
如何查看仅一个用户提交的git日志？ 1178
require,include,require_once和include_once之间的区别？ 1166
我必须在何处以及为何要使用"模板"和"typename"关键字？ 1061
测量Python中经过的时间？ 1031