jquery如何在单击此链接时仅更改链接类

时间:2012-04-04 00:20:17

标签: javascript html

我有一些项目,我需要更改点击项目的类别,如下所示

  • 从默认值
  • 中移除类电流
  • 将班级当前添加到点击的

我的HTML代码

                <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>

这是执行该工作的jquery代码

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

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

它完美无缺,否则当我点击任何其他链接时,它会将该代码应用到它,我需要将此代码仅应用于ul.filter

4 个答案:

答案 0 :(得分:3)

可能这会更简单,更简单。它的作用就是删除它的兄弟姐妹当前的类并为它自己添加新的当前类。

$('.filter a').click(function(){
  $(this).addClass('current').siblings().removeClass('current');
});

答案 1 :(得分:1)

使用:not()省略当前项目

   $(".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

答案 2 :(得分:1)

此代码段应该适合您!

$('.class a').on('click', function(){
  $('.class a').removeClass('current');
  $(this).addClass('current');
});

答案 3 :(得分:0)

如果您希望点击处理仅在ul.filter中进行,那么您应该更新您的选择器以反映:

$("ul.filter > li a")

而不是

$(".filter > li a")

如果您有多个带有“filter”类的ul元素并且您只想将该功能应用于其中一个,那么您应该为该特定ul提供一个id并更改您的选择器以使用该ID。