函数内的 jQuery removeClass 和 addClass答案

【问题标题】：jQuery removeClass and addClass within a function函数内的 jQuery removeClass 和 addClass
【发布时间】：2012-11-02 15:16:42
【问题描述】：

我有以下菜单：

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

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

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

删除“活动”类有效，将“活动”类添加到单击的元素不起作用。有什么想法吗？

最好的问候！

【问题讨论】：

标签： jquery function this addclass

【解决方案1】：

正如 thatidiotguy 所说，您在错误的地方删除了课程。你想要这样的东西：

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

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

编辑：而且，您的a 标签中不需要javascript:loadTab();。将他们的href 属性更改为#：

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

另外，我在链接的click 事件处理程序中添加了event.preventDefault();。

【讨论】：

我在这个函数中有更多需要执行的东西。我只是将原始函数之外的 removeClass 和 addClass click 移到页脚中，它现在可以工作了，但我想我可以将它与这个函数结合起来。

【解决方案2】：

这是因为每当您单击选项卡时，都会删除该类。然后，您会告诉选项卡在单击时调用 loadTab。这再次删除了类。 Think Inception“梦中之梦”

【讨论】：