一个函数内的jQuery removeClass和addClass [英] jQuery removeClass and addClass within a function

问题描述

我得到以下菜单：

 < ul id =navclass =nav> 
< li> 
< a class =navitem activehref =javascript：loadTab（）;>我的个人资料< / a> 
< / li> 
< li> 
< a class =navitem searchhref =javascript：loadTab（）;>搜寻< / a> 
< / li> 
< li> 
< a class =navitemhref =javascript：loadTab（）;>收藏夹< / a> 
< / li> 
< / ul> 
  

以及我的函数（加载到头文件中的.js文件中）：

 函数loadTab（）{
 jQuery（。navitem）。removeClass（active）; 
 jQuery（。navitem）。click（function（）{
 jQuery（this）.addClass（active）; 
}）; 
} 
  

删除类active的作品，将类active添加到点击元素不起作用。任何想法？

最好的问候！

解决方案正如thatidiotguy所说，你在错误的地方去除了课程。你需要这样的东西：

  jQuery（。navitem）。click（function（event）{
 event .preventDefault（）; 
 
 jQuery（。navitem）。removeClass（active）; 
 jQuery（this）.addClass（active）; 
}） ; 
  

编辑：另外，不需要 javascript：loadTab（）; 在您的 a 标记中。将它们的 href 属性更改为＃：



 < ul id =navclass =nav> 
< li> 
< a class =navitem activehref =＃>我的个人资料< / a> 
< / li> 
< li> 
< a class =navitem searchhref =＃>搜寻< / a> 
< / li> 
< li> 
< a class =navitemhref =＃>收藏夹< / a> 
< / li> 
< / ul> 
  

另外，我添加了 event.preventDefault（）; 在点击链接的事件处理程序。

I got following menu:

   <ul id="nav" class="nav">
    <li>
     <a class="navitem active" href="javascript:loadTab();">My Profile </a>
    </li>
    <li>
     <a class="navitem search" href="javascript:loadTab();"> Search </a>
    </li>
    <li>
     <a class="navitem" href="javascript:loadTab();">Favorites </a>
    </li>
   </ul>

And my function (loaded in a .js file in the header):

function loadTab() {
    jQuery(".navitem").removeClass("active");
       jQuery(".navitem").click(function () {
          jQuery(this).addClass("active");
       });
}   

Removing the class "active" works, adding the class "active" to the clicked element isn't working. Any ideas?

Best regards!

解决方案

As thatidiotguy said, you're removing the class in the wrong place. You want something like this:

jQuery(".navitem").click(function (event) {
    event.preventDefault();

    jQuery(".navitem").removeClass("active");
    jQuery(this).addClass("active");
});

Edit: And also, no need for the javascript:loadTab(); in your a tags. Change their href attributes to #:

<ul id="nav" class="nav">
    <li>
        <a class="navitem active" href="#">My Profile </a>
    </li>
    <li>
        <a class="navitem search" href="#"> Search </a>
    </li>
    <li>
        <a class="navitem" href="#">Favorites </a>
    </li>
</ul>

Also, I added event.preventDefault(); in the click event handler for the links.

这篇关于一个函数内的jQuery removeClass和addClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！