jQuery: How to add active selected menu class?

Question

I have trouble with active class with this menu.

enter image description here

As you can see here, now active class is on all orders tab.

I want to active this this on each tab when i click on it with removing past tab's class.

HTML for this menu-

<ul id="mainSideMenu" class="nav nav-list nav-side" >
    <li class="accordion-group">
        <div class="accordion-heading active ">
            <a href="#accDash" id="AllOrders" data-parent="#mainSideMenu"  data-toggle="collapse" class="accordion-toggle ">
                <span class="item-icon fontello-icon-monitor "></span><i class="chevron fontello-icon-right-open-3"></i>
                All Orders
            </a>
        </div>
    </li>
</ul>

Here is active class-

.nav-side .accordion-group > .active {
    background: url("../img/background/body-bg-02.jpg") repeat scroll 0 0;
}

With jQuery i tried-

$(function(){
    $(".accordion-group").click(function(){
        $(".accordion-group").removeClass('.active').addClass('.active');
        $(this).addClass('.active');
    });
});

That was not happening

This is happening live here- Boo admin template

Could you possibly make a jsfiddle?

chriz
– chriz

2013-04-09 09:22:54 +00:00
Commented Apr 9, 2013 at 9:22 — chriz
– chriz, Commented Apr 9, 2013 at 9:22

TwiN · Accepted Answer · 2013-04-09 09:18:55Z

2

You don't need the leading dot in addClass and removeClass.
And why do you add back the active class in the 2nd line? Remove that part.
And you are adding the class to the heading, not the group?

$(function(){
    $(".accordion-group").click(function(){
        $(".accordion-heading").removeClass('active');
        $(this).find('.accordion-heading').addClass('active');
    });
});

answered Apr 9, 2013 at 9:18

TwiN

1,9671 gold badge17 silver badges27 bronze badges

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

1 Comment

Manoz Over a year ago

Even removing dot from addClass and second line not solving this, Maybe some path problem there.

David Hedlund · Accepted Answer · 2013-04-09 09:19:27Z

0

It is not your .accordion-group that has the active class so that's not where you need to add and remove it. Furthermore, you should add and remove a class named active, not .active.

It also seems that you are currently re-adding the active class immediately after you've removed it, which is in error.

$(function(){
   $(".accordion-group").click(function(){
      $(".accordion-group .active").removeClass('active');
      $('.accordion-heading', this).addClass('active');
   });
});

answered Apr 9, 2013 at 9:19

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Comments

PSR · Accepted Answer · 2013-04-09 09:19:29Z

0

try this

$(".accordion-group").removeClass('active').addClass('active');

classname is enough.Remove . before class name

answered Apr 9, 2013 at 9:19

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

Sowmya · Accepted Answer · 2013-04-09 09:19:37Z

0

Remove .from class name

$(function(){
$(".accordion-group").click(function(){
$(".accordion-group").removeClass('active').addClass('active');
$(this).addClass('active');
});
});

answered Apr 9, 2013 at 9:19

Sowmya

27k21 gold badges102 silver badges137 bronze badges

Comments

Adil Shaikh · Accepted Answer · 2013-04-09 09:20:18Z

0

$(this).addClass('active');

remove .

read more about .addClass() and .removeClass()

answered Apr 9, 2013 at 9:20

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

Samina · Accepted Answer · 2013-04-09 09:23:57Z

0

<ul class="ulVertical">
        <li id="firstLink" class="vertical-selected-li">My First Link</li>
        <li id="secondLink" class="">My Second List</li>
        <
    </ul>

<script type="text/javascript">
$(document).ready(function () { 
    $("#secondLink").click(function () {

    $(this).siblings().removeClass('vertical-selected-li');
    $(this).addClass('vertical-selected-li');

    }); 
});
</script>

answered Apr 9, 2013 at 9:23

Samina

1541 silver badge6 bronze badges

Comments

Robin Leboeuf · Accepted Answer · 2013-04-09 13:12:00Z

0

As this seems to be an accordion plugin I think the click is catched by the "a" and not propaged to the li.accordion-group (that's why your code doesn't appear to be executed), did you try listening the event on the "a" instead of the "li" ?

something like

$(function(){
    $(".accordion-group .accordion-heading a").click(function(){
        $(".accordion-heading").removeClass('active');
        $(this).parent().addClass('active');
    });
});

btw, I would use the .on() method instead of the .click() :)

answered Apr 9, 2013 at 13:12

Robin Leboeuf

2,1261 gold badge13 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery: How to add active selected menu class?

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related