Power By 专否社区

jquery how can i change only link class when this link ic clicked

Go To StackoverFlow.com

0

i have a li items i need to change class of the clicked items as follow

  • remove class current from the default one
  • add class current to the clicked one

my html code here

                <ul class="filter">
                <li><a href="#" title="" class="current">recent</a></li>
                <li><a href="#" title="">top popularity</a></li>
                <li><a href="#" title="">top commented</a></li>
                <li><a href="#" title="">other ...</a></li>

            </ul>

and here is the jquery code to do that job

      $(".filter > li a").click(function(){

      $(".filter li a.current").removeClass("current");
        $(this).addClass("current");
      });

it works perfect otherwise when i clicked on any link else these links it apply that code to it, i need to apply this code only to ul.filter

2012-04-04 00:20
by ahmedsaber111
Could you please elaborate? The code you've shown looks OK, but I don't understand your explanation of what's going wrong - nnnnnn 2012-04-04 00:25
when i click at a link elsewhere in the page it apply that cssClass to it, i need only to apply this class for the links inside ul.filter only @nnnnn - ahmedsaber111 2012-04-04 00:27
Are those other links also under this element - Tuan 2012-04-04 00:30
no it was outside this parent and has a different class @nnnnn - ahmedsaber111 2012-04-04 00:33
Works fine for me. No other links on the page are changed - Ilia Frenkel 2012-04-04 00:33
I agree with Ilia: the code as shown wouldn't apply when you click other links so there must be something else going on in the html or JS that you don't show. Can you provide a demo, perhaps at http://jsfiddle.ne - nnnnnn 2012-04-04 00:39
I'm speculating, but maybe you have some other code for those other links that are adding that "current" class also - Tuan 2012-04-04 00:46

0

If you want the click processing to occur only within ul.filter then you should update your selector to reflect that:

$("ul.filter > li a")

Rather than

$(".filter > li a")

If you have more than one ul element with the "filter" class and you only want to apply the functionality to one of them then you should give that particular ul an id and change your selector to use the id.

2012-04-04 00:33
by nnnnnn

3

Probably this would be easier and simpler. What it does is just removes its siblings current class and add new current class to itself.

$('.filter a').click(function(){
  $(this).addClass('current').siblings().removeClass('current');
});
2012-04-04 01:16
by Dips
In the html shown in the question the anchor tags aren't siblings - nnnnnn 2012-04-04 04:42

1

Use :not() to omit the current item

   $(".filter > li a").not(".current").on('click', function(){
       if(!$(this).hasClass("current")) {
           $(".filter").find("a.current").removeClass("current");
           $(this).addClass("current");
           alert($(this).html());
       }
   });

Demo

2012-04-04 00:29
by Starx
i tried your modification, and it doesn't seem to be no changes made in the code, when clicking in any link in the page it applied the cssClass to it @Star - ahmedsaber111 2012-04-04 00:32
@ahmedsaber111, See the update. Its a strange problem, I haven't faced before, but the above work - Starx 2012-04-04 00:40

1

This snippet should work for you!

$('.class a').on('click', function(){
  $('.class a').removeClass('current');
  $(this).addClass('current');
});
2012-04-04 01:10
by Igor Escobar
Ads