title: How to keep an active link highlighted throughout - Bootstrap?
body: <p>Can anyone help me with a script that will keep selected links highlighted? </p>
  
  <pre><code>&lt;div id="productnav"&gt;
  &lt;nav&gt;
  &lt;ul class="nav"&gt;
  &lt;li&gt;&lt;a href="&lt;?php echo $prefix; ?&gt;pages/one.php?category=1" id="navelement1"&lt;?php if ($c == 1) echo ' class="current"';?&gt;&gt;One&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="&lt;?php echo $prefix; ?&gt;pages/two.php?category=2" id="navelement2"&lt;?php if ($c == 2) echo ' class="current"';?&gt;&gt;Two&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="&lt;?php echo $prefix; ?&gt;pages/three.php?category=3" id="navelement3"&lt;?php if ($c == 3) echo ' class="current"';?&gt;&gt;Three&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="&lt;?php echo $prefix; ?&gt;pages/four.php?category=4" id="navelement4"&lt;?php if ($c == 4) echo ' class="current"';?&gt;&gt;Four&lt;/a&gt;&lt;/li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below code only keeps the first clicked link highlighted, as soon as you select another item on selected page, it no longer remains active.</p>
  
  <pre><code> Array.prototype.forEach.call(
       document.querySelectorAll('#productnav a[href]'), 
       function(t) { 
          var hr = t.href.split("/").pop();
          if (window.location.href.indexOf(hr) &gt; -1)
              t.className = 'active'; 
          else
              t.className = '';
       }
    );
  </code></pre>
  
  <p>The CSS here</p>
  
  <pre><code>#productnav ul li a.active { border-right: solid 8px rgb(200,10,50);  text-decoration: none; background-color: #4E5765; !important; }
  </code></pre>
  
  <p>Thanks...</p>