How to apply a style on links with querystrings - html

Question

So basically if you want an indicator on the link of the page you are currently on you just apply a style on the page for example:
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
It will apply whatever style is on the class active when you are in the home.aspx page...
Now I have something similar but this time, instead of directing to another page, the links will just redirect on the same page but filtered with querystrings...
I have:
<li>PROJECT 1</li>
<li>PROJECT 2</li>
<li>PROJECT 3</li>
What I would like to happen is I want to apply a css style when I click one of those links so that people know which project they are looking at.

Answer 1

Just add a little jquery to add the .active class to selected element.
<script>
jQuery(function($){
var url = window.location.href;
// give the li or a tag a class
$('.element-class-name a[href="'+ url +'"]').addClass('active');
$('.element-class-name a').filter(function() {
return this.href == url;
}).addClass('active');
});
</script>

Answer 2

Try caching selector $("a[href^=projects]") as variable , attach click event to cached selector , utilize .each() to iterate all elements in collection , set className to "active" if this current element === event.target
var a = $("a[href^=projects]");
a.click(function(e) {
a.each(function() {
this.className = this === e.target ? "active" : ""
})
})
var a = $("a[href^=projects]");
a.click(function(e) {
// Note, `e.preventDefault()` included for stacksnippets
e.preventDefault();
a.each(function() {
this.className = this === e.target ? "active" : ""
})
})
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>PROJECT 1
</li>
<li>PROJECT 2
</li>
<li>PROJECT 3
</li>
</ul>

Answer 3

Doing something like the following works also:
$('.link').on('click', function(e) {
$('.links li .link').removeClass('active');
$(this).addClass('active');
});
Where link is the class I gave the actual link within a list called links.
The example is here: http://codepen.io/anon/pen/OyJgBQ