CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-selectors
ReynierPM
ReynierPM

Reputation: 18660

How to change class on click event

I trying to change the CSS class asigned to a element on click event but can't see which is the selector I must use in my case. See I have a DL with some DD inside, the first DD have class="active" and I need to remove this class when I pick any other DD and asign the class to the DD picked up, understand? A bit example:

<dl>
  <dd class="active">DD1</dd>
  <dd>DD2</dd>
  <dd>DD3</dd>
</dl>

If I pick DD2 then class="active" should dissapear from DD1 and move to DD2 and so on. I think in use :eq() but though doesn't work. Any advice or help?

EDIT: Sample is ready!! Goes to http://comvivem.treswd.com/net/ and login as demo/demo123 and then go to "Directorio" you will see Filters and beside letters "A", "B" and so on, as you can see A is default and have active class but pick "B" or any other and see what's happeninng, this is what I'm refer before!

Cheers and thanks

Upvotes: 0

Views: 105

Answers (2)

Lixus
Lixus

Reputation: 296

This JavaScript does change the link on click, but this is not necessary in your scenario:

$("dd").click(function(){
    $("dd").removeClass("active");
    $(this).addClass("active");
});

You should rather do something like this:

$(document).ready(function(){
    var letter = window.location.pathname.slice(-1);
    $("dd").removeClass("active");
    $("dl.sub-nav dd a:contains("+letter+")").parent().addClass("active");
});

It's still hacky, it would be better to set the class to the currently selected letter in the server side script.

Upvotes: 0

adeneo
adeneo

Reputation: 318222

$('dd').on('click', function() {
    $(this).addClass('active').siblings().removeClass('active');
});

FIDDLE

Upvotes: 4

Related Questions