Reputation: 3
I want to give a class to the parent li
tag after clicking on the a
tag.
After clicking on the a
tag it removes the class selected but I can not add it back.
<header class="main-header">
<nav class="grid-container main-nav main-nav-big">
<ul class="grid-12">
<li class="liBig selected">
<a href="#">Home</a>
</li>
<li class="liBig">
<a href="#">About</a>
</li>
<li class="liBig">
<a href="#">Buy</a>
</li>
<li class="liBig">
<a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
$("nav ul li a").click(function(){
$("nav ul").children().removeClass("selected");
$("this").parent().addClass("selected");
});
Upvotes: 0
Views: 965
Reputation: 36703
You need to remove " "
from this
, it is not a string and use e.preventDefault
.
$("nav ul li a").click(function(e){
e.preventDefault();
$("nav ul").children().removeClass("selected");
$(this).parent().addClass("selected");
});
Upvotes: 3