Jquery如何更改点击链接类

您好我想知道如何更改点击链接的类？Jquery如何更改点击链接类

这里是我的html：

<div id="category_list" class="list-group"> 
     <a href="#" data_category="all_apps" class="list-group-item active"> 
      <span class="badge">2</span>All applications</a> 
       <a href="#" data_category="New1" class="list-group-item"> 
      <span class="badge">1</span> 
         New1 
        </a>   
       <a href="#" data_category="new2" class="list-group-item"> 
      <span class="badge">1</span> 
         new2 
        </a>   
       <a href="#" data_category="new4" class="list-group-item"> 
      <span class="badge">1</span> 
         new4 
        </a>   

    </div>

和我想做的事是设置类当前选择的 list-group-item active和他人list-group-item

，这里是我的jQuery，但它不是工作：

$("#category_list a").click(function(e) { 
    var link = $(this); 
    $('#category_list a').each(function(e) { 
     if ($(this) == link) { 
      alert($(this).text()); 
      $(this).addClass('list-group-item active').removeClass('list-group-item'); 
     } 
     else { 
      $(this).addClass('list-group-item').removeClass('list-group-item active'); 
     } 
    }); 
    e.preventDefault(); 
});

来源

2014-01-14 Vardius

active是您要添加的类别/删除，所以你只需要从所有链接删除它，然后将其添加到点击一个：

$("#category_list a").click(function(e) { 
    $("#category_list a").removeClass('active'); 
    $(this).addClass('active'); 
    e.preventDefault(); 
});

示例 - http://jsfiddle.net/infernalbadger/UNMY7/

来源

2014-01-14 12:07:33

它可以工作，但链接已停用。我的意思是一个链接不会将我重定向到所需的页面。我总是在主页上。链接停止工作。 – user2824371

@ user2824371删除e.preventDefault（）;线。 –

看来，当我加载一个新页面时，我的代码被重新加载（重置）并且主页仍处于活动状态。以下是我的作品：我得到页面的名称，然后根据页面的名称执行代码。 – user2824371

您可以使用.not()来排除选择器中的点击链接

$("#category_list a").click(function(e) { 
    $("#category_list a") 
     .not(this) //Exclude current element 
     .removeClass('active'); 

    //Add class with clicked link 
    $(this).addClass('active'); 

    e.preventDefault(); 
});

来源

2014-01-14 12:06:14 Satpal

你可以简化您的代码如下：

$('#category_list a').on('click', function(e) { 
    e.preventDefault(); 
    $(this).addClass('active').siblings('a').removeClass('active'); 
});

jsFiddle Demo

来源

2014-01-14 12:09:04 BenM

是的，这个答案是最好的... –

Jquery如何更改点击链接类

回答

相关问题