Jquery change css class when achor clicked

Question

I am trying to add a class to a list item when the item is clicked. I did some research and still was unable to add the class properly. thanks!

edit:I am using a masterpage in asp.net

<ul id="menu">
      <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
      <li><a id="default" href="Default.aspx">Home</a></li>
       <li><a id="projects" href="Projects.aspx">Projects</a></li>
      <li><a id="blogs" href="Blogs.aspx">Blogs</a></li>
      <li><a id="photos" href="Photos.aspx">Photos</a></li>
       <li><a id="resume" href="Resume.aspx">Resume</a></li>
      <li><a id="contacts" href="Contact.aspx">Contact</a></li>
    </ul>

<script type="text/javascript" language="javascript">
   $(document).ready(function () {
       $('ul.menu li a').click(function () {
           $(this).parent().addClass('selected');
       });
   });

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover

{ color: #FFF; background: #1C2C3E url(menu_select.png) repeat-x;}

J. Ed · Accepted Answer · 2011-08-15T17:20:21.220

7

your selector is incorrect. ul.menu means a ul with class menu.
when looking for an id, simply use $("#menu")

also, you may want to take a look at the answers given by @DefyGravity and @Joseph Silber-
they suggest that if you don't prevent the default click event, the user's browser would simply follow the link, and the user would never actually see the added class, since they'll be navigated to a different page.

edited Aug 15 '11 at 17:20

answered Aug 15 '11 at 17:13

J. Ed

6,692
4
39
55

sJhonny was first, +1, highly recommend the prevent default. Optionally, remove the 'selected' class from the sibling
's.

DefyGravity

Aug 15 '11 at 17:22

How would can you change the page then? – user516883 Aug 15 '11 at 17:29

you should add your 'selected' class on load (and not when clicking a link), based on the current page that you're on. see the accepted answer here: http://stackoverflow.com/questions/6690930/how-to-manipulate-on-document-ready-elements-which-were-created-on-document-rea – J. Ed Aug 15 '11 at 17:49

score 1 · Answer 2 · answered Aug 15 '11 at 17:14

Change your jQuery to this:

$(document).ready(function () {
    $('ul#menu li a').click(function (e) {
        $(this).parent().addClass('selected');
        e.preventDefault();
    });
});

You had the ul.menu which is referring to a class of menu, where as you have an ID of menu on the tag

score 1 · Answer 3 · answered Aug 15 '11 at 17:15

1

You have to return false, otherwise the browser just follows the link:

 $(document).ready(function () {
       $('ul#menu li a').click(function () {
           $(this).parent().addClass('selected');
           return false;
       });
 });

answered Aug 15 '11 at 17:15

Joseph Silber

214,931
59
362
292

DefyGravity · Answer 4 · 2011-08-15T17:29:16.493

you have a typo in your selector, ul.menu looks for a unordered list with a 'class' of menu. your html states it the un-ordered list has an ID of menu. You may also want to 'event.preventDefault()':

    <script type="text/javascript" language="javascript">
           $(document).ready(function () {
               $('#menu li a').click(function (event) {
     event.preventDefault();
                   $(this).parent().addClass('selected');
// also think about removing the class 'selected' from all the other links.
  $(this).parent().siblings('.selected').removeClass('selected');
               });
           });
        </script>

How to change page if you prevent the default? – user516883 Aug 15 '11 at 17:29 — user516883, Aug 15 '11 at 17:29

Jquery change css class when achor clicked

4 Answers4