title: How to active a tab when a pagination links is clicked in that tab?
body: <p>When user accesses "<a href="http://proj.test/user/profile?user=1" rel="nofollow noreferrer">http://proj.test/user/profile?user=1</a>" he goes to a page like below that has 3 tabs, one for the user to edit his acccount, other (My Tickets) for the user to access information about his registrations in congresses and other (My Congresses) for the user to access the information of congresses created by him. The default tab when this page is acessed his the "Edit user account".</p>
  
  <p><a href="https://i.stack.imgur.com/VekB9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VekB9.png" alt="enter image description here"></a></p>
  
  <p>The tab1 content is for the user to edit his profile. When user click in "Update" the code goes to the UserController to update the user info.</p>
  
  <p>When the user click in the tab2 (My Tickets) the content of this tab is like below. It shows the registrations in congresses of the user. Inside this tab content it appears also 2 tabs for the user to show his registrations in congresses that already finish and other tab to show his registrations in congresses that have not yet been performed.</p>
  
  <p>Then there is the pagination if there are more than 5 results, when the user change to link "2" he goes to "<a href="http://proj.test/user/profile?page=2" rel="nofollow noreferrer">http://proj.test/user/profile?page=2</a>".</p>
  
  <p><a href="https://i.stack.imgur.com/eCOVi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eCOVi.png" alt="enter image description here"></a></p>
  
  <p>When the user click in the tab3 (My Congresses) the content of this tab is like below. It shows the congresses created by the user. Inside this tab content it appears also 3 tabs, one (Draft) for the user to show the congresses created by him that have the column "status" as "D", other (Published) to show the congresses created by the user that have the column "status" as "P" and other (Archived) to show the congresses created by the user that already finished.</p>
  
  <p>Then there is the pagination if there are more than 5 results, when the user change to link "2" he goes to "<a href="http://proj.test/user/profile?page=2" rel="nofollow noreferrer">http://proj.test/user/profile?page=2</a>".</p>
  
  <p><a href="https://i.stack.imgur.com/ex7jm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ex7jm.png" alt="enter image description here"></a></p>
  
  <p><strong>Doubt:</strong></p>
  
  <p>The issue with this context is that when a pagination link is clicked in some tab, for example if the user is in the tab "Draft" inside "My Congresses" tab, and clicks in the pagination link "2", the url changes to "<a href="http://proj.test/user/profile?page=2" rel="nofollow noreferrer">http://proj.test/user/profile?page=2</a>" but the tab that become active his the first one, the "Edit user account" tab. Then if the user clicks in "My Congresses" it appears the results of the page 2, but the user needs to manually click in the "My Congresses".</p>
  
  <p>Do you know how to turn, in this case, the "My Congresses" tab active when a pagination page link is clicked in the "My Congresses" tab?</p>
  
  <p><strong>Full code on this page to show all the tabs:</strong></p>
  
  <pre><code>&lt;ul class="nav nav-pills" role="tablist"&gt;
      &lt;li class=""&gt;
          &lt;a class="nav-link active" href="#updateUserInfo" data-toggle="tab" role="tab"&gt;Edit user account&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="disabled"&gt;
          &lt;a class="nav-link" href="#myCongresses" data-toggle="tab" role="tab"&gt;My Congresses&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="disabled"&gt;
          &lt;a class="nav-link" href="#myTickets" data-toggle="tab" role="tab"&gt;My Tickets&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content" id="myTabContent"&gt;
      &lt;div class="tab-pane fade show active clearfix" id="updateUserInfo" role="tabpanel" aria-labelledby="home-tab"&gt;
          &lt;form method="post" action="{{route('user.updateUserInfo')}}" class="clearfix"&gt;
              {{csrf_field()}}
              &lt;div class="form-row"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="name"&gt;Name&lt;/label&gt;
                      &lt;input type="text" value="{{$user-&gt;name}}" name="name" class="form-control" id="name" &gt;
                  &lt;/div&gt;
                 &lt;!--other form fields--&gt;
              &lt;input type="submit" class="btn btn-primary btn" value="Update"/&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class="tab-pane clearfix fade" id="myCongresses" role="tabpanel" aria-labelledby="contact-tab"&gt;
              &lt;ul class="nav nav-pills"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link active border" href="#draftCongresses" data-toggle="tab"
                         role="tab"&gt;Draft&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link border" href="#publishedCongresses" data-toggle="tab"
                         role="tab"&gt;Published&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link border" href="#archivedCongresses" data-toggle="tab"
                         role="tab"&gt;Archived&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;div class="tab-content bg-white" id="myTabContent"&gt;
              &lt;div class="tab-pane fade active show clearfix" id="draftCongresses" role="tabpanel" aria-labelledby="home-tab"&gt;
                  &lt;ul class="list-group"&gt;
                      @foreach($draftCongresses as $draftCongress)
                          @if(!empty($draftCongress))
                              &lt;li class="list-group-item"&gt;
                                  &lt;p&gt;{{$draftCongress-&gt;start_date-&gt;formatLocalized('%a, %b %d, %Y - %H:%M')}}&lt;/p&gt;
                                  &lt;h5&gt;{{$draftCongress-&gt;name}}&lt;/h5&gt;
                                  &lt;a href="{{route('congress.edit', ['id' =&gt; $draftCongress-&gt;id])}}" class="btn"&gt;Edit Congress&lt;/a&gt;
                              &lt;/li&gt;
                          @endif
                      @endforeach
                  &lt;/ul&gt;
                  &lt;div class="text-center d-flex justify-content-center mt-3"&gt;
                      {{$draftCongresses-&gt;links(("pagination::bootstrap-4"))}}
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="tab-pane fade show clearfix" id="publishedCongresses" role="tabpanel" aria-labelledby="home-tab"&gt;
                  &lt;ul class="list-group"&gt;
                      @foreach($publishedCongresses as $publishedCongress)
                          @if(!empty($publishedCongress))
                              &lt;li class="list-group-item"&gt;
                                  &lt;p&gt;{{$publishedCongress-&gt;start_date-&gt;formatLocalized('%a, %b %d, %Y - %H:%M')}}&lt;/p&gt;
                                  &lt;h5&gt;{{$publishedCongress-&gt;name}}&lt;/h5&gt;
                                  &lt;a href="{{route('congress.edit', ['id' =&gt; $publishedCongress-&gt;id])}}"
                                     class="btn btn-outline-primary"&gt;Edit Congress&lt;/a&gt;
                              &lt;/li&gt;
                          @endif
                      @endforeach
                  &lt;/ul&gt;
                  &lt;div class="text-center d-flex justify-content-center mt-3"&gt;
                      {{$publishedCongresses-&gt;links(("pagination::bootstrap-4"))}}
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="tab-pane fade show clearfix" id="archivedCongresses" role="tabpanel" aria-labelledby="home-tab"&gt;
                  &lt;ul class="list-group"&gt;
                      @foreach($archivedCongresses as $archivedCongress)
                          @if(!empty($archivedCongress))
                              &lt;li class="list-group-item"&gt;
                                  &lt;p&gt; {{$archivedCongress-&gt;start_date-&gt;formatLocalized('%a, %b %d, %Y - %H:%M')}}&lt;/p&gt;
                                  &lt;h5&gt;{{$archivedCongress-&gt;name}}&lt;/h5&gt;
                                  &lt;a href="{{route('congress.edit', ['id' =&gt; $archivedCongress-&gt;id])}}"
                                     class="btn btn-outline-primary"&gt;Edit Congress&lt;/a&gt;
                              &lt;/li&gt;
                          @endif
                      @endforeach
                  &lt;/ul&gt;
  
                  &lt;div class="text-center d-flex justify-content-center mt-3"&gt;
                      {{$archivedCongresses-&gt;links(("pagination::bootstrap-4"))}}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab"&gt;
  
          &lt;div class="d-flex mb-3"&gt;
              &lt;ul class="nav nav-pills"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link active border" id="nextCongresses" href="#nextCongresses" data-toggle="tab" role="tab"&gt;Next Congresses&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link border" id="pastCongresses" href="#pastCongresses" data-toggle="tab" role="tab"&gt;Past Congresses&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="tab-content" id="myTabContent"&gt;
              &lt;div class="tab-pane fade show active" id="nextCongresses" role="tabpanel" aria-labelledby="home-tab"&gt;
                  &lt;ul class="list-group" id="nextCongressesContainer"&gt;
                      @foreach($nextRegistrations as $nextRegistration)
                          @if(!empty($nextRegistration-&gt;congress || !empty($nextRegistration-&gt;congress-&gt;start_date)))
                              &lt;li class="list-group-item"&gt;
                                  &lt;p&gt;{{optional($nextRegistration-&gt;congress)-&gt;start_date-&gt;formatLocalized('%a, %b %d, %Y - %H:%M')}}&lt;/p&gt;
                                  &lt;h5&gt;{{optional($nextRegistration-&gt;congress)-&gt;name}}&lt;/h5&gt;
                                  &lt;p&gt; Registration in {{optional($nextRegistration-&gt;congress)-&gt;created_at }}&lt;/p&gt;
                              &lt;/li&gt;
                          @endif
                      @endforeach
                  &lt;/ul&gt;
  
                  &lt;div class="text-center d-flex justify-content-center mt-3"&gt;
                      {{$nextRegistrations-&gt;links(("pagination::bootstrap-4"))}}
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="tab-pane fade show" id="pastCongresses" role="tabpanel" aria-labelledby="home-tab"&gt;
                  &lt;ul class="list-group" id="pastCongressesContainer"&gt;
                      @foreach($pastRegistrations as $pastRegistration)
                          @if(!empty($pastRegistration-&gt;congress || !empty($pastRegistration-&gt;congress-&gt;start_date)))
                              &lt;li class="list-group-item"&gt;
                                  &lt;p&gt;{{optional($pastRegistration-&gt;congress)-&gt;start_date-&gt;formatLocalized('%a, %b %d, %Y - %H:%M')}}&lt;/p&gt;
                                  &lt;h5&gt;{{optional($pastRegistration-&gt;congress)-&gt;name}}&lt;/h5&gt;
                                  &lt;p&gt; Registration in   {{$pastRegistration-&gt;created_at}}&lt;/p&gt;
                              &lt;/li&gt;
                          @endif
                      @endforeach
                  &lt;/ul&gt;
  
                  &lt;div class="text-center d-flex justify-content-center mt-3"&gt;
                      {{$pastRegistrations-&gt;links(("pagination::bootstrap-4"))}}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>UserController:</p>
  
  <pre><code>class UserController extends Controller
  {
      public function index(Request $request){
  
          $pageLimit = 5;
  
          $user = $request-&gt;user();
  
          $pastRegistrations = $user-&gt;registrations()-&gt;with(['congress' =&gt; function ($query) {
              $query-&gt;where('end_date', '&lt;', now());
          }])-&gt;paginate($pageLimit);
  
          $nextRegistrations = $user-&gt;registrations()-&gt;with(['congress' =&gt; function ($query) {
              $query-&gt;where('end_date', '&gt;', now());
          }])-&gt;paginate($pageLimit);
  
          $draftCongresses = $user-&gt;congresses()-&gt;where('status','D')-&gt;paginate($pageLimit);
          $pastCongresses = $user-&gt;congresses()-&gt;where('end_date','&lt;', now())-&gt;paginate($pageLimit);
          $publishedCongresses = $user-&gt;congresses()-&gt;where('status','P')-&gt;paginate($pageLimit);
  
          return view('users.index',
              compact('user', 'pastRegistrations','nextRegistrations', 'draftCongresses', 'pastCongresses', 'publishedCongresses'));
      }
  }
  </code></pre>
  
  <p><strong>Example of the issue</strong></p>
  
  <p>If pagination link "2" is clicked here:</p>
  
  <p><a href="https://i.stack.imgur.com/ex7jm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ex7jm.png" alt="enter image description here"></a></p>
  
  <p>Instead of appear the page with the "My Congresses" tab active like the image above but with the pagination link "2" active instead of the pagination link "1" active, it appaers the page with the default active tab "Edit user account":</p>
  
  <p><a href="https://i.stack.imgur.com/VekB9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VekB9.png" alt="enter image description here"></a></p>