链接未更改颜色JavaScript

Question

I have searched the internet for help on creating links that work like radio buttons as shown here:

http://jsfiddle.net/CXrgm/6/

However after trying many different attempts, I just don't get why it doesn't work. All that happens is that my active link stays active and none of the other links change to active class.

 $('.account_links li a').click(function() { $('.account_links li a').removeClass('active'); $(this).addClass('active'); }); 

 .account_links { list-style-type: none; margin-top: 20px; margin-left: 30px; margin-right: 50px; font-family: 'Raleway', sans-serif; font-size: 20px; display: block; } .account_links a { color: #08c; text-decoration: none; } .account_links li { padding-bottom: 30px; } .account_links a:hover { text-decoration: underline; } .account_links .active { color: #08c08c; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='account_links'> <li><a href='#' class="active">Home</a></li> <li><a href='#'>Shop</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul> 

I know I could set each link to active for each webpage, but I am doing something with JavaScript 'onclicks' and I don't think it will work but what the jsfiddle shows is exactly what I need.

Answer 1

If your trying to implement the li's dynamically use .on for binding its events. eg. $("selector").on("event", function(){}) . This makes sure that the events will be binded to the element once it is created in DOM. However your scenario seems to static html ul li's. In simple words here is what your code $('.account_links li a').click(function() { $('.account_links li a').removeClass('active'); $(this).addClass('active'); }); is doing:

• jQuery selector works from right to left. There are exceptions though, for example when the first operand is an ID. Then the search will operate in the context of the element with this ID.
• It will have all the a tags and look up for ancestor li and then elements with class .account_links.
• It will target the clicked element.
• It will remove all the active classes from anchor tag.
• Adds the active class to the clicked element, ref by (this) context.

Your working fiddle : Jsfiddle

Make sure you have included JQuery Library properly.