Active link after click

Question

I cant find a way to add a class to an "a" element of a nav bar.

This is the html nav and the jQuery (applied to test.html url only, to test it):

$(document).ready(function() {
  $("a").click(function() {
    var actRef = $(this).attr("href");
    if (actRef === "test.html") {
      $("a[href='test.html']").addClass("active");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="index.html">Inicio</a>
    </li>
    <li><a href="test.html">Test</a>
    </li>
    <li><a href="#">Item</a>
    </li>
    <li><a href="test2.html"> test2</a>
    </li>
  </ul>
</nav>

This isnt working, it just doesnt do anything, but if i change the .click to .hover it works fine adding the class but doesnt go to the link so the info of the page wont change.
I also tried this: How to change active class while click to another link in bootstrap use jquery? but neither works because of the e.preventDefault();...

If i take out the preventDefault it wont add the class but it will forward to the link...

PD: The aim is to let the user know on which tab he is actually on depending on the menu link he clicked.

@SalmanA yes, so the user knows on which tab he is actually navigating — Alpha2k, Dec 06 '14 at 20:01
Just to clarify, your requirement is to highlist the link till user navigates. So you want to see the on which he is actually. Case 1 :- user clicks link test.html , it is highligted and then user reachs to test.html. it is back to oridinary. Case 2 :- Once user on page test.html , he wants it to be highligted till he is on test.html — Panther, Dec 06 '14 at 20:25
@Panther indeed, i want to highlight the menu link where the user actually is. THIS: Case 2 :- Once user on page test.html , he wants it to be highligted till he is on test.html — Alpha2k, Dec 06 '14 at 20:26
ok , then you need to take different approach which i have suggested in my answer, first navigate to page. One you land on that page, you can highlight the that page. — Panther, Dec 06 '14 at 20:30
The question has been asked a dozen times before: "[how to add active class to current page](http://stackoverflow.com/search?q=how+to+add+.active+class+to+current+page)" — Salman A, Dec 06 '14 at 20:32
@SalmanA none working,at least not for me... and yes, i used search before posting — Alpha2k, Dec 06 '14 at 20:33

score 1 · Answer 1 · answered Dec 06 '14 at 20:08

1

Why not use then anchors :active state:

a:active {
     /* your .active styles */
}

answered Dec 06 '14 at 20:08

Vucko

20,555
10
56
107

active doesnt work, well it does but ONLY as long as i hold down the click, when i realease it, it returns to default css i gave. – Alpha2k Dec 06 '14 at 20:13

score 1 · Answer 2 · answered Dec 06 '14 at 20:14

You code is not working as you are trying to set class on some link using javascript, and then navigating same time. So thing is the part where you are changing class for link is working actually, however you are not able to see it as after navigation html will be reloaded.

To solve this problem , you need write a common function for updating the class of link, in your common html. However, call that function from the html being loaded at onload event instead of calling at click.

Your common js or html will be having function :-

highlightlink(linkid){
   $("a[href=' + linkid +']").addClass("active");
}

Each html will call this functin onload with respective htmlname. For example test.html will hat this code :-

$(document).ready( function (){
  highlightlink('test.html')
});
});

While index.html will have :-

 $(document).ready( function (){
  highlightlink('index.html')
});
});

Once your html is loaded, the that particular html will loaded

Varun Chakervarti · Answer 3 · 2014-12-06T20:20:11.727

So what you can do is you can add a page link in the URL querystring like:

www.example.com/test.html?pageinfo=test.html

Now after the successful page loads you can retrieve page info from the query string and then you can add an active class to the anchor tag.

This way you will get querystring like this pageinfo=test.html and after successful parsing of querystring you will convert the information to {pageinfo:test.html}.

Using that you can add style/class to the anchor tag.

score 0 · Answer 4 · answered Dec 06 '14 at 20:07

Do you really need to add a class to the html element? If it's about styling I think it might be possible to solve your styling using a simple :active pseudo selector. See example below:

li:active {
  background-color: #f99;
}

li a:active {
  color: #fff;
}

<nav>
  <ul>
    <li><a href="index.html">Inicio</a>
    </li>
    <li><a href="test.html">Test</a>
    </li>
    <li><a href="#">Item</a>
    </li>
    <li><a href="test2.html"> test2</a>
    </li>
  </ul>
</nav>

score 0 · Accepted Answer · answered Dec 06 '14 at 20:54

0

Thanks to @Panther this is easier than i tought:

$(document).ready( function(){
var location = window.location.pathname;
location = location.replace("/", "");
$("a[href='"+location+"']").addClass("active");
});

answered Dec 06 '14 at 20:54

Alpha2k

2,212
7
38
65

@Panther how about his solution? – Alpha2k Dec 06 '14 at 20:55

Active link after click

5 Answers5

Linked