title: How to highlight active link in bootstrap 3?
body: <p>There are 3 in-line buttons in a website that is based on bootstrap version 3:</p>
  <pre><code>&lt;div class=&quot;btn-group&quot;&gt;
  &lt;a class=&quot;btn btn-primary&quot; href=&quot;page1.php&quot;&gt;button 1&lt;/a&gt;
  &lt;a class=&quot;btn btn-primary&quot; href=&quot;page2.php&quot;&gt;button 2&lt;/a&gt;
  &lt;a class=&quot;btn btn-primary&quot; href=&quot;page3.php&quot;&gt;button 3&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want to highlight whichever a tag is active, I tried the following jquery code</p>
  <pre><code>$(&quot;.btn-group &gt; a&quot;).click(function(){
  $(this).addClass(&quot;active&quot;).siblings().removeClass(&quot;active&quot;);
  $(this).addClass(&quot;active&quot;);
  </code></pre>
  <p>but it doesn't work, I even tried the following code</p>
  <pre><code>$(&quot;.btn-group &gt; a&quot;).click(function(e){
  e.preventDefault();
  $(this).addClass(&quot;active&quot;).siblings().removeClass(&quot;active&quot;);
  $(this).addClass(&quot;active&quot;);
  </code></pre>
  <p>above code seems to work, but the issue is the link stopped working altogether. it just stays the same page and only highlight buttons.</p>
  <p>Any guidance how I can achieve it?</p>
  <p>I would like to do it with a tag instead of  tag, but I'm open to suggestions.</p>