How to addClass to list element?

Question

I have been looking for an answer to this for a while and I thought that my code was correct but it doesn't seem to be working.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/app.js"></script>
<div class="navigation" align="center">
    <ul>
        <a href="#"><li id="aboutlink">About</li></a>
        <a href="#linkedin"><li id="linkedinlink">Linkedin</li></a>
        <a href="#contact"><li id="contactlink">Contact</li></a>
   </ul>
</div>

CSS

.navigation a {
text-decoration: none;
}
.navigation  {
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
}
.navigation ul li {
color: #f0f0f0;
display: inline;
padding: 15px 15px 0px 15px;
}
.navigation ul li:hover {
border-bottom: solid 2px #cc4926;
}
.active {
border-bottom: solid 2px #007f59;
}

.body {
font-size: 16px;
}

jQuery 1.11.1

$(document).ready(function() {
   $("#linkedinlink").click(function() {
     $(this).addClass('active')
   });
}),

You can also check out the code on jsfiddle

Can you tell me what I am doing wrong??

Answer 1

Your last ) has a comma instead of a ; which is causing it to throw an error, fix that and you should be golden.

http://jsfiddle.net/dhershman/9no05urs/2/

Edit: Keep an eye on your console. It is your guide to all things error.

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/app.js"></script> <div class="navigation" align="center"> 
<ul>
<li id="aboutlink"> <a href="#">About</a></li> <li id="linkedinlink"> <a href="#linkedin">Linkedin</a></li> 
<li id="contactlink"> <a href="#contact">Contact</a></li> </ul> </div>

Firstly correct your HTML elements now try your jquery method on it.

$(document).ready(function() { $("#linkedinlink").click(function(e) e.prevent default(); $(this).addClass('active') }); }),