使用JQUERY Load时更改活动导航栏链接

Question

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>

Answer 1

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'); }) 

Answer 2

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()
});

Answer 3

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");
            }
        });