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

Posted

技术标签:

【中文标题】在该选项卡中单击分页链接时如何激活选项卡?【英文标题】:How to active a tab when a pagination links is clicked in that tab? 【发布时间】:2018-10-07 14:24:14 【问题描述】:

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

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

当用户点击tab2(我的门票)时,该选项卡的内容如下所示。它显示了用户在大会上的注册。在此选项卡内容中,还显示了 2 个选项卡供用户显示他在已经完成的大会中的注册情况,以及其他选项卡显示他在尚未执行的大会中的注册情况。

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

当用户在 tab3 (My Congresses) 中单击时,此选项卡的内容如下所示。它显示了用户创建的会议。在此选项卡内容中还出现了 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>

用户控制器:

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”:

不是像上图那样显示“我的大会”选项卡处于活动状态的页面,但分页链接“2”处于活动状态而不是分页链接“1”处于活动状态,而是显示默认活动选项卡“编辑”的页面用户帐户”:

【问题讨论】:

你能在标签上展示处理.active类的JS吗? 我正在使用 bootstrap 4 默认 js。没有这个“ ”标签不起作用。 【参考方案1】:

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

例如,你可以这样做

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

您可以查看文档here

【讨论】:

谢谢,现在例如,如果点击分页链接“2”,则 url 将更改为“proj.test/user/profile?page=2#myCongresses”。但是页面中的活动选项卡是“#updateUserInfo”选项卡。您知道将活动选项卡更改为“#myCongresses”吗? 您在 URL 的末尾有一个 &amp;quot; ,它搞砸了。尝试复制并越过我写的确切行,然后告诉它现在是否可以 谢谢,但没有“;”选项卡也没有更改,网址更改为“proj.test/user/profile?page=2#myCongresses”,但保持活动状态的选项卡是“#updateUserInfo”,这是默认选项卡。 唯一的区别是 " $draftCongresses->fragment('myCongresses')->links("pagination::bootstrap-4") " insetad of " $draftCongresses->链接((“分页::bootstrap-4”))“。 可能需要一些 jQuery,像这样的“jsfiddle.net/mww3w64L”不起作用,网址更改为“proj.test/user/profile?page=2#myCongresses”,但选项卡保持活动状态是“#updateUserInfo”,即默认选项卡。【参考方案2】:

改变这些:

$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"))

..对这些:(即添加相应的链接片段)

$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"))

然后将这个 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>

【讨论】:

以上是关于在该选项卡中单击分页链接时如何激活选项卡?的主要内容,如果未能解决你的问题,请参考以下文章

在特定选项卡中打开链接 - 来自电子邮件

如何在单击反应中的按钮时在新选项卡中打开页面?我也想向该页面发送一些数据

Vue.js:如何在已打开的选项卡中打开外部链接?

如何专注于第二个选项卡并使用 selenium webdriver 处理它

在一个选项卡中打开链接[重复]

选项卡内容布局显示在其他选项卡中