Turn the tab active based on the current url

Question

I have some list items in the "#registration_form_list" list. The default active list item is the list item with id "#generalInfo". But I want that when a url like this " http://proj.test/user/profile?user=1#myTickets " is accessed the tab that stays active is the "My Tickets" tab.

So I want to turn the tab active based on the current url. But its not working with the jQuery below.

Do you know why?

Html:

<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
    <li class="">
        <a class="nav-link active" href="#generalInfo" data-toggle="tab" role="tab">
            <i class="fa fa-user" aria-hidden="true"></i> <span class="d-none d-lg-inline-block">General Info</span></a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#myTickets" data-toggle="tab" role="tab">
            <i class="fa fa-calendar" aria-hidden="true"></i> <span
                    class="d-none d-lg-inline-block">My Tickets</span></a>
    </li>
    <!-- more list items -->
</ul>

jQuery:

   var path = window.location.href;

        $('.registration_form_list a').each(function () {
            var hash = $(this).attr('href').split('#')[1];
            //alert(hash); appaers
            if (this.href === path) {
                // alert('test'); dont appears
                $('.registration_form_list a').removeClass('active');
                $('a[href="#'+hash+'"]').addClass('active');
            }
        });

For example I have a method where the user is redirected to the " http://proj.test/user/profile?user=1#myTickets " but the tab that remains active is the "#generalInfo" when the user accesses the page.

return redirect(route('user.index', ['user' => Auth::id()]).'#myTickets');

The tabs content are inside tab-content with the corresponding id like:

<div class="tab-content registration_body bg-white" id="myTabContent">

    <div class="tab-pane fade show active clearfix" id="generalInfo" role="tabpanel" aria-labelledby="home-tab">
    <!-- #generalInfo content -->
    </div>

    <div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab">
        <!-- #myTickets content -->
    </div>
    <!-- other tabs -->
</div>

Answer 1

Try this

$(document).ready(function() {
  // Obtain hash value from the url
  var hash = window.location.hash;
  // Try to find a nav-link with the hash
  var hashNavLink = $('.nav-link[href="'+hash+'"]');

  // If there is no link with the hash, take default link
  if (hashNavLink.length === 0) {
    hashNavLink = $('.nav-link[href="#generalInfo"]');
  }

  hashNavLink.addClass('active');
});

In this case you can be sure that if a wrong hash is in the url, the #generalInfo link will be set as active and in other cases the correct link will be always active.

You can obtain hash value directly from Location .

Answer 2

var path = window.location.href; returns the entire path of your URL.

this.href is equaling #generalInfo so it will never equal http://proj.test/user/profile?user=1#generalInfo

If you want to have a condition on the URL vs the href value of your anchor tag, you need to cut down your path

//This will always assume you're only using 1 pound sign    
var path = window.location.href.split("#")[1];

This way, path = generalInfo (assuming you're on http://proj.test/user/profile?user=1#generalInfo )

Then you need to make your condition if(hash === path){} (not if (this.href === path) because this.href is equal to #generalInfo and not just generalInfo

So it would now be looking for generalInfo === generalInfo

Whole code would be:

 var path = window.location.href.split('#')[1]; //equals the hash

    $('.registration_form_list a').each(function () {
        var hash = $(this).attr('href').split('#')[1];
        //alert(hash); appaers
        if (hash === path) {
            // alert('test'); dont appears
            $('.registration_form_list a').removeClass('active');
            $('a[href="#'+hash+'"]').addClass('active');
        }
    });

(as a side note, something I like to do is remove the active class off of all anchor links in this situation before you add a new one to the specific one)