change css class dynamically using jquery

Question

I would like change <li> css class dynamically. I am using asp.net masterpage. In below example If I click on AboutUs.aspx link on page load I want change <li class="single"> to <li class="active single">.

How to do that?

 <div class="nav-collapse">
     <ul class="nav nav-pills">
           <li class="active single"><a href="Default.aspx">HOME
                 <i>company home</i>
                  </a>
            </li>
            <li class="single"><a href="AboutUs.aspx">About Us
                 <i>want to say</i>
                  </a>
            </li>

When you load the page you have the links render with the class. You know what page is rendering the content through the Request object so it's just a matter of when you render the links to match the page to the href and change the color. What have you tried so far? — scrappedcola
– scrappedcola, Commented Apr 2, 2013 at 14:41

Adrian Godong · Accepted Answer · 2013-04-02 14:47:16Z

1

As @scrappedcola have said, you don't have to do it in Javascript as this is totally doable from server side code. But if you insist, here are the steps:

1 You have to tell Javascript which item in the menu you want highlighted. Create unique identifiers for each menu item and tell the server side code to set that. For example:

<li class="single home">
    <a href="Default.aspx">HOME<i>company home</i></a>
</li>
<li class="single aboutus">
    <a href="AboutUs.aspx">About Us<i>want to say</i></a>
</li>
<script>
    var activeLink = 'aboutus';
</script>

2 Create and call the Javascript/jQuery function to change the CSS class:

$("." + activeLink).addClass("active");

answered Apr 2, 2013 at 14:47

Adrian Godong

8,9718 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2013-04-02 14:42:36Z

1

$('.nav-collapse > ul > li > a').click( function(){
   $('li').removeClass('.active');
   $(this).parent().addClass('.active');
});

answered Apr 2, 2013 at 14:42

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

dsgriffin · Accepted Answer · 2013-04-02 14:46:59Z

1

Like so:

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

Here's a jsFiddle example - http://jsfiddle.net/HNKeA/1/.

edited Apr 2, 2013 at 14:46

answered Apr 2, 2013 at 14:41

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

1 Comment

scrappedcola Over a year ago

it's going through a page load so this will work up until the page reloads

Petr Čihula · Accepted Answer · 2013-04-02 14:41:46Z

0

$('.nav-pills a').click(function(){
    $('.nav-pills li').removeClass('active');
    $(this).parent().addClass('active')
})

answered Apr 2, 2013 at 14:41

Petr Čihula

9977 silver badges10 bronze badges

Comments

Suresh Atta · Accepted Answer · 2013-04-02 14:42:08Z

0

 $('li.single').click(function(){
      $(this).addClass('active');

  });

or

 $('li.single').click(function(){
         $(this).attr('class', 'active single');
      });

answered Apr 2, 2013 at 14:42

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

insertusernamehere · Accepted Answer · 2013-04-02 14:45:30Z

0

$("ul li:first").attr('class', 'newClass');

just change the selector accordingly. This should change every li whats nested in ul

edited Apr 2, 2013 at 14:45

insertusernamehere

23.7k10 gold badges93 silver badges130 bronze badges

answered Apr 2, 2013 at 14:42

MrKekson

7406 silver badges19 bronze badges

Collectives™ on Stack Overflow

change css class dynamically using jquery

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related