We Keep Coding

Active navigation class based on current URL problem

I have the following HTML menu:
<div class="nav">
<ul>
<li class="first">Home</li>
<li>Something</li>
<li>Else</li>
<li class="last">Random</li>
</ul>
<ul style="float:right;">
<li class="first last">News</li>
</ul>
</div>
</div>
And then I have this code:
jQuery(function($){
var current = location.pathname;
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
The code is working great, but it has a problem. For example, if I see the Home page (www.example.com) then all of the menu links receives the active class. Another problem would be that it works great for www.example.com/something but it doesn't keep it active if I go to www.example.com/something/1 etc. Any idea how to fix this? Thanks in advance!

For home page add extra class 'default' in list like.
<li class="first default">Home</li>
jquery code.
jQuery(function($){
var current = location.pathname;
console.log(current);
//remove the active class from list item.
$('.nav ul li a').removeClass('active');
if(current != '/'){
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
$this.addClass('active');
}
})
}else{
console.log('home');
$('.default a').addClass('active');
}
})

Use the below jQuery code to add active class:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$(".nav ul li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});

By using indexOf(), you are checking if the link's target is the same the current location.
What you want is not "the same URL" but "the same pattern", so I would tend to use a regular expression :
let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
$(this).addClass("active");
}
Note that this would force you to create a separate solution for your link to the main page, else it would always be active.

toggleClass on hyperlink not working

I'm working with the following code:
http://jsfiddle.net/k5pnj4a4/8/ however my 'toggleClass' isn't working. Try the example in jsFiddle. Basically if I click the link, it goes red as expected but click again & it doesn't return to the original state :-(
Javascript:
$(document).ready(function(){
$('.filters a').on('click', function() {
var data_filter = $(this).closest("a").data('filter');
$(this).addClass('active');
if($(this).hasClass('active')) {
localStorage.setItem(data_filter,true);
} else {
localStorage.setItem(data_filter,false);
}
});
$('.filters a').each(function(){
var data_filter = $(this).closest("a").data('filter');
var checked = localStorage.getItem(data_filter);
if(checked){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
HTML
<div class="filters">
<h3 data-target="#colours_filters">Colour</h3>
<ul id="colours_filters">
<li class="filter-option">Black</li>
<li class="filter-option">Blue</li>
</ul>
</div>
Can someone provide assistance with this?
Thank you

Try this:
$(document).ready(function(){
$('.filters a').on('click', function() {
if($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
});
});

Add class active when clicking the menu link with Jquery

I have HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
</div>
and JQUERY
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
The problem is that when i click on the Home link all tabs are getting active class and don't understand why. I need it for the first link to not get any active class.

I'm also looking for this solution and I have tested your code. On the first approach all links are highlighted and when I click other links it is working properly. The problem was on the home page because all links are highlighted because there is "no event been received" when the page is loaded, the code will work if you send a command or by clicking each links, theoretically. To stop this behavior, I found this code to one of the answers above, add this code and change the ".sibling()" to ".previousSibling()"
$(this).parent().sibling().find('a').removeClass('active');
".sibling()" will highlighted at the end of your links change it to ".previousSibling()" so it will go to first (Li)
$(this).parent().previoussibling().find('a').removeClass('active');
Your code will be like this:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$(this).parent().previoussibling().find('a').removeClass('active');
}
});
});

Check this , this will only activates clicked tab , remove active for all and then add for the one clicked
$("#top a").click(function() {
$('a').removeClass('active');
$(this).addClass("active");
});
Check this

You may try this out. It will help you:
<script type="text/javascript">
$(function () {
$('#sidebar li a').each(function () {
var path = window.location.pathname;
if (path.indexOf('?') > 0) {
var current = path.indexOf('?');
}
else {
var current = path;
}
var url = $(this).attr('href');
var currenturl = url.substring(url.lastIndexOf('.') + 1);
if (currenturl.toLowerCase() == current.toLowerCase()) {
$(this).addClass('active');
var par = $(this).parent();
par.addClass('open');
}
});
});
</script>

You're running a foreach loop on all <a> tags within your #top div. So of course it'll add the class active to all of them.
I think what you're trying to do is this: http://jsfiddle.net/rLddf/4/
I used the click event instead.
edit switched link to Kristof Feys example - more efficient.

try this...
$(function() {
$('#yourMenu a').each(function(){
$current = location.href;
$target= $(this).attr('href');
if ( $target== $current)
{
$(this).addClass('active');
}
});
});

I came across the same issue and I found it easier to just add an additional if statement so that the function would fire on all pages except the home page which met my needs.
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#top a').each(function(){
if ( window.location.pathname != '/' ){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
}
});
});
You could also add in an else statement to show an active link on the homepage by targeting the link directly if required.

I think you need something like this:
$(function () {
$("#top a").click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
});
});
Fiddle Demo

JQuery get link and add variable depending on nth number

I have a list set up containing links. Before this list is another link, this is the html:
<div class="catItemBody">
<div class="catItemImage">
Link
</div>
<ul class="sigProBetton">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="catItemBody">
<div class="catItemImage">
Link
</div>
<ul class="sigProBetton">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
There are multiple .catItemBody on the page, each containing a unique link.
I also have some jquery which takes the first link (.catItemImage a) and applies it to each of the links in the list. What I am trying to do is modify this link depending on the list items nth number. I have been experimenting with the first link item using the following jQuery:
$(document).ready(function() {
$('.catItemBody').each(function(){
var linkitem = $('.catItemImage a', this).attr('href');
if ($('ul.sigProBetton li').is(':nth-child(1)')){
$('ul.sigProBetton li a', this).attr('href' , linkitem+'?image=1');
} else {
$('ul.sigProBetton li a', this).attr('href' , linkitem);
}
});
});
Eventually I want to build on this so that the link in the first item has the URL variable of ?image=1, then the second will have ?image=2 etc... I need the 'count' to reset so that the list in the next .catItemBody will start again at ?image=1.
At the moment, each link has the variable ?image=1 which is not ideal. I have set up a jsFiddle at http://jsfiddle.net/Dyfe6/.
EDIT
All of your answers seem to work but the problem is that I have more than one .catItemBody on the page, an updated jsfiddle can be found at http://jsfiddle.net/Dyfe6/9/

No need to use nth-child.
I didn't understand if you wanted to reset or not the image count, so here it is not resetted :
$(document).ready(function () {
var count = 0;
$('.catItemBody').each(function () {
var linkitem = $(this).find('.catItemImage a').attr('href');
$(this).find('ul.sigProBetton li').each(function () {
count++;
$(this).find('a').attr('href', linkitem + '?image=' + count);
});
});
});
jsFiddle : http://jsfiddle.net/Dyfe6/11/
And here it is resetted :
$(document).ready(function () {
$('.catItemBody').each(function () {
var linkitem = $(this).find('.catItemImage a').attr('href');
$(this).find('ul.sigProBetton li').each(function (index) {
$(this).find('a').attr('href', linkitem + '?image=' + (index + 1));
});
});
});
http://jsfiddle.net/Dyfe6/12/

This may not be the best way, but I've done it like this:
var pre = $('.catItemImage').children('a').attr('href');
var links = $('.sigProBetton li a'),count=1;
$(links).each(function() {
$(this).attr('href',pre+'?image='+count);
count += 1;
});

use :first-child instead of :nth-child(1)

updated
$(document).ready(function () {
$('.catItemBody').each(function () {
var linkitem = $('.catItemImage a', this).attr('href');
var $this=$(this);
$this.find('ul.sigProBetton li').each(function (index) {
$this.find('a').attr('href', linkitem + '?image=' + (index + 1));
});
});
});
fiddle here

You can leverage the jQuery's index() method. http://api.jquery.com/index/
Here's the update jsFiddle: http://jsfiddle.net/ArtBIT/Dyfe6/4/

Add class to <li> when clicking on a link

That's the html of my menu:
<ul class="nav">
<li>A</li>
<li><a href="#b" >B</a></li>
<li><a href="#c" >C</a></li>
<li><a href="#d" >D</a></li>
</ul>
I want that, after I clicked on a link in the menu, the active class will be added to the clicked <li>.
Thanks in advance

Use jquery
$("li a").click(function() {
$('li a').not(this).removeClass('active');
$(this).toggleClass('active');
});
DEMO Updated

He is not asking for a jQuery solution. But that jQuery would be the ideal choice, here is how to do it with javascript, best practices, event delegation and modern. Perhaps someone learns something new from it as well.
http://jsfiddle.net/N9Hem/
window.onload = function(){
(function(){
var els = [];
var doc = document;
var get = function(id){return doc.getElementById(id);};
get('clickable').onclick = function(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
els = doc.querySelectorAll('#clickable a');
if(el.nodeName == "A"){
for(var i = els.length - 1; i >= 0; i -= 1){
els[i].className = '';
};
el.className = 'active';
};
};
})();
};

If you use jQuery then you could use code like this:
$(function () {
$(".nav a").click(function () {
$(".nav a").removeClass("active");
$(this).addClass("active");
});
});

Try this with jQuery
$('#nav li a').click(function(){
$('#nav li a').removeClass('active');
$(this).addClass('active');
});

Here is a prototype that doesn't use jquery as you didn't request it on your question.
It searches for the current element with the active class, remove it and add the class to the clicked one.
Javasript Function
function activeThis(element){
var current = document.getElementsByClassName("active")[0];
current.className = null;
element.className="active";
}
HTML code
<a href="#b" onclick="activeThis(this)">

I hope I got what you want... I add eventHandlers to <ul>. On click remove clicked from previous elem and set clicked-class (if current class is active??)
<ul class="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<script>
var clickedElem = null;
document.getElementsByClassName("nav")[0].addEventListener("click", function (e) {
if (clickedElem)
clickedElem.removeAttribute("class");
// check if e.srcElement.className is active?? that's what you want?
e.srcElement.className = "clicked";
clickedElem = e.srcElement;
});
</script>

This one should works for you
elems =document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click", function (e) {
for (var i = 0; i < elems.length; i++) {
elems[i].className="";
};
this.className = "active";
});
}

I guess this will work
var navlinks = document.getElementByClass('nav').getElementsByTagName('a');
for (var i = 0; i < navlinks.length; i++) {
if(navlinks[i].className == 'active'){
navlinks[i].parentNode.parentNode.parentNode.className = 'YOUR CLASS';
}
}

Check my fiddle
I hope this is what you want
http://jsfiddle.net/arunberti/ftZzs/
a:visited
{
color:green;
}
a:active {color:yellow;}
a:link {color:red;}

Try this:
$('.nav li').click(function(e) {
$(this).addClass('selected').siblings().removeClass('selected');
});
Alternatively, if you want to attach the click event to the a:
$('.nav a').click(function(e) {
e.preventDefault();
$('.nav a').removeClass('selected');
$(this).addClass('selected');
});
Example fiddle

thats quite easy
jQuery CODE:
$('.nav li a').on('click',function(){
$('.nav li').each(function() {
var anc=$(this).find('a');
if(anc.hasClass('active'))
{
$(anc).removeClass('active');
}
})
$(this).addClass('active');
})
Edited:
Code is refined
Happy Coding :)