Vfrdtyky

I have a navigation bar which is being loaded into each of my pages using a JQUERY '.load'

However, the active link will be different for each page. Is there a way i can override the active link from the page that has loaded the Navbar?

Any help would be much appreciated :)

Below is an example of the Navbar links

  <nav class="navbar navbar-toggleable-sm">

                  <button type="button" data-toggle="collapse" data-target="#mai-navbar-collapse" aria-controls="#mai-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-md-up collapsed">

                    <div class="icon-bar"><span></span><span></span><span></span></div>

                  </button>

                  <div id="mai-navbar-collapse" class="navbar-collapse collapse mai-nav-tabs">

                    <ul class="nav navbar-nav">

                                <li class="nav-item parent open"><a href="#" role="button" aria-expanded="true" class="nav-link"><span class="icon s7-home"></span><span>Training</span></a>

                                  <ul class="mai-nav-tabs-sub mai-sub-nav nav">

                                              <li class="nav-item"><a href="/teams/Training/sitepages/training/writtenguides.aspx" id="12222" class="nav-link active"><span class="icon s7-monitor"></span><span class="name">Written Guides</span></a></li>

                                              <li class="nav-item"><a href="/teams/Training/sitepages/training/videoguides.aspx" class="nav-link"><span class="icon s7-video"></span><span class="name">Video Guides</span></a></li>            

                                  </ul>

                                </li>

                                <li class="nav-item parent"><a href="#" role="button" aria-expanded="false" class="nav-link"><span class="icon s7-users"></span><span>Support</span></a>

                                  <ul class="mai-nav-tabs-sub mai-sub-nav nav">

                                              <li class="nav-item"><a href="/teams/Training/sitepages/support/signup.aspx" class="nav-link"><span class="icon s7-id"></span><span class="name">Signing Up</span></a></li>

                                              <li class="nav-item"><a href="/teams/Training/sitepages/support/faqs.aspx" class="nav-link"><span class="icon s7-search"></span><span class="name">FAQS</span></a></li>

                                  </ul>

                                </li>



                    </ul>

                  </div>

                </nav>

JQUERY

 <script>

                    $(function(){

                      $("#nav-placeholder").load("../../navbarL1.aspx");

                        $('.dropdown-toggle').dropdown()

                    });







                    </script>

Try to run this code. I hope it will work.

function getURL() {

    // get the whole URL 

    var currentURL = window.location.href;



    // get the file name after = sign  

    var activeTemplate = currentURL.substr(currentURL.indexOf("=") + 1);



    // add active class to url  

    $('a[href="/teams/Training/sitepages/training/'+ activeTemplate +'"]').addClass('active');

})

You can use .toggleClass() with a toggle state value as the second param. At that point it's a matter of figuring out how to compare the href with the current URL. You can use location.pathname, but you may want to get the href using getAttribute so it doesn't include the hostname. Otherwise you could also use this.href === location.href. It is important, however, to include this code in a callback to .load() so you don't encounter a race condition.

$(function(){

  $("#nav-placeholder").load("../../navbarL1.aspx", function(){

    $('.mai-sub-nav li a').each(function(){

      $(this).toggleClass('active', this.getAttribute('href') === location.pathname);

    })

  });

  $('.dropdown-toggle').dropdown()

});

You have to follow this kind of technique to achieve that

Here is my nav bar

<ul class="nav navbar-nav">

   <li class="active" data-pos="1">

      <a href="{{ route('public.site') }}">Home</a>

   </li>

   <li data-pos="2">

      <a href="{{ route('site.page',['about']) }}">About Egypt</a>

   </li>

   <li data-pos="3">

      <a href="{{ route('site.accomodation') }}">Accomodation</a>

   </li>

   <li data-pos="4">

      <a href="{{ route('site.nile_curises') }}">Nile Cruises</a>

                      `enter code here`  

   </li>

   <li data-pos="5">

     <a href="{{ route('site.tour_packages') }}">Tour Packages</a>

   </li>

   <li class="dropdown" data-pos="6">

     <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">FAQ</span>

     </a>

     <ul class="dropdown-menu">

          <li><a href="{{ route('site.page',['thing-to-do']) }}">Thing to do</a></li>

          <li><a href="{{ route('site.page',['travel-tip']) }}">How to travel</a</li>

          <li><a href="{{ route('site.page',['travel-help']) }}">Travel Help</a></li>

     </ul>

  </li>

</ul>

Here is my script logic in which i get full url and spilt on the base of '/' seprator
to get an array and check second last and last segment

var url = window.location.href; 

var urlArray = url.split("/");

var lastUrlString = urlArray[urlArray.length-1];

var pageName = urlArray[urlArray.length-2];

After getting last and second last segment i loop through navbar li elements and add or remove class on the basis of page names

        var navLinks = $('ul.nav li');

        navLinks.each(function(index,element){



            var position = $(element).data('pos');



            if(lastUrlString == 'home')

            {

                if($(element).data("pos") == 1)

                {

                    if(!$(element).hasClass("active") )

                    {

                        $(element).addClass('active');

                    }

                }

                else

                {

                    $(element).removeClass("active");

                }

            }

            else if(lastUrlString == 'about')

            {

                if($(element).data("pos") == 2)

                {

                    if(!$(element).hasClass("active") )

                    {

                        $(element).addClass('active');

                    }

                }

                else

                {

                    $(element).removeClass("active");

                }

            }

            else if(lastUrlString == 'page' &&  pageName == 'accomodation')

            {

                if($(element).data("pos") == 3)

                {

                    if(!$(element).hasClass("active") )

                    {

                        $(element).addClass('active');

                    }

                }

                else

                {

                    $(element).removeClass("active");

                }

            }

            else if(lastUrlString == 'page' &&  pageName == 'nile_curises')

            {

                if($(element).data("pos") == 4)

                {

                    if(!$(element).hasClass("active") )

                    {

                        $(element).addClass('active');

                    }

                }

                else

                {

                    $(element).removeClass("active");

                }

            }

            else if(lastUrlString == 'page' &&  pageName == 'tour_packages')

            {

                if($(element).data("pos") == 5)

                {

                    if(!$(element).hasClass("active") )

                    {

                        $(element).addClass('active');

                    }

                }

                else

                {

                    $(element).removeClass("active");

                }

            }

            else

            {

                $(element).removeClass("active");

            }

        });