Question

我收到了以下菜单：

   <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");
       });
}

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

祝你好运！

Answer 1

正如thatidiotguy所说，你是在错误的地方取消课程。你想要这样的东西：

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

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

修改：此外，您的javascript:loadTab();代码中不需要a。将他们的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>

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

Answer 2

这是因为无论何时单击选项卡，您都将删除该类。然后，当您单击时，您将告诉选项卡调用loadTab。这再次取消了课程。想一想“梦中的梦想”

一个函数中的jQuery removeClass和addClass

2 个答案: