How to keep an active link highlighted throughout - Bootstrap?

Can anyone help me with a script that will keep selected links highlighted?

<div id="productnav">
<nav>
<ul class="nav">
<li><a href="<?php echo $prefix; ?>pages/one.php?category=1" id="navelement1"<?php if ($c == 1) echo ' class="current"';?>>One</a></li>
<li><a href="<?php echo $prefix; ?>pages/two.php?category=2" id="navelement2"<?php if ($c == 2) echo ' class="current"';?>>Two</a></li>
<li><a href="<?php echo $prefix; ?>pages/three.php?category=3" id="navelement3"<?php if ($c == 3) echo ' class="current"';?>>Three</a></li>
<li><a href="<?php echo $prefix; ?>pages/four.php?category=4" id="navelement4"<?php if ($c == 4) echo ' class="current"';?>>Four</a></li></li>
</ul>
</nav>
</div>

Below code only keeps the first clicked link highlighted, as soon as you select another item on selected page, it no longer remains active.

 Array.prototype.forEach.call(
     document.querySelectorAll('#productnav a[href]'), 
     function(t) { 
        var hr = t.href.split("/").pop();
        if (window.location.href.indexOf(hr) > -1)
            t.className = 'active'; 
        else
            t.className = '';
     }
  );

The CSS here

#productnav ul li a.active { border-right: solid 8px rgb(200,10,50);  text-decoration: none; background-color: #4E5765; !important; }

Thanks...

3 answers

  • answered 2018-01-11 21:07 Syncro

    That's impossibile because when the user clicks a link, the page changes and JavaScript can't "remember" which links user have clicked before, just because the script has been reloaded.

    You can:

    • Store the clicked links in Browser Memory / Cookie;
    • Use asynchronous page loading with XHR and jQuery;

  • answered 2018-01-11 21:12 Razvan Zamfir

    If you can add an active class to the list item containing the link to the current page, through PHP, do:

    .navbar-nav li.active a {
      background: rgba(0, 0, 0, .1);
    }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <nav id="productnav" class="navbar navbar-default">
      <ul class="nav navbar-nav">
        <li><a href="/about" title="About Us">About Us</a></li>
        <li class="active"><a href="/contact" title="Contact Us">Contact Us</a></li>
      </ul>
    </nav>

    If you want a Java Script solution for adding the active class, tell me.

  • answered 2018-01-11 21:39 Razvan Zamfir

    You can use JQuery to add the active class:

    function activeClass() {
      var fullCurrentURL = window.location.href;
      var CurrentURLparts = fullCurrentURL.split("/");
      var CurrentURLindex = CurrentURLparts.length - 1;
      var CurrentURL = CurrentURLparts[CurrentURLindex];
      console.log(CurrentURL);
    
      $('.navbar-nav > li a').each(function() {
        var fullLinkURL = $(this).attr('href');
        var LinkURLparts = fullLinkURL.split("/");
        var LinkURLindex = LinkURLparts.length - 1;
        var LinkURL = LinkURLparts[LinkURLindex];
        if (LinkURL === CurrentURL) {
          $(this).parents("li").addClass("active");
          $(this).closest("ul").css('display', 'block');
        }
      });
    }
    activeClass();
    .navbar-nav li.active a {
      background: rgba(0, 0, 0, .1);
    }
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <nav id="productnav" class="navbar navbar-default">
      <ul class="nav navbar-nav">
        <li><a href="/about" title="About Us">About Us</a></li>
        <li><a href="/js" title="JavaScript">JavaScript</a></li>
        <li><a href="/contact" title="Contact Us">Contact Us</a></li>
      </ul>
    </nav>