Javascript 从Wordpress循环中单击链接时添加类

我正在尝试隔离一个类并将其添加到单击的锚标记中。标签是从Wordpress循环中提取的。我可以编写JQuery来删除静态类，但它是从div中的所有标记中删除类，而不仅仅是从单击的标记中删除类，在一瞬间添加活动类，然后在页面重新加载新的项目集时删除所有类

这是WP循环

我已经回顾了其他类似的问题，但这两个解决方案都不适合我。这可以通过JQuery完成，还是应该在html内联锚中放置一个click事件

看起来它只工作了一秒钟，直到页面重新加载

我正在使用Chrome开发工具查看源代码。看起来它工作正常，但当页面重新加载时，静态类将从div中的所有锚标记中删除。是否有原因在页面加载后删除新添加的类名

它通过url传递变量来加载一组项目。例如，当你点击它正在传递的东西时，在url中键入=airports以获得特定的相对帖子

更新：

也许有更好的方法来实现这一点。总体目标是向用户显示在查看结果集时单击的链接。因此，当单击内容时，链接有绿色背景和白色类型，等等。既然JQuery正在删除页面重载中添加的类，那么php是更好的解决方案吗

更新2

所有建议的代码都有效。由于链接正在重新加载页面并通过url参数进行过滤，因此问题没有得到解决，但答案完全正确

$("div.more a").on("click", function () {
    $(this).removeClass("static").addClass("active");
});

$在本例中表示当前单击的对象

我无法解释加课不起作用的事情。我刚刚用最新的jquery进行了尝试，它很有效。您确定它没有添加活动吗

编辑 然后无耻地从我下面的答案中偷取亚历山大：p：

$("div.more a").on("click", function (event) {
   event.preventDefault();
  // Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");

  window.location.hash = $(this).text();
});

有人试过那样的东西。它可能有几个错误，但我相信通过一些阅读你可以修复它们

再次编辑：

请注意：

   event.preventDefault();

这意味着不要跟随链接，因此当您单击此链接时，它不会重新加载页面。我认为这实际上解决了你的问题

注意：请记住使用：

$("div.more a").on("click", function (event) {

否则它就不行了。

我同意这个：

$("div.more a").on("click", function () {
  // Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");
});

从所有锚点移除活动类。 将类static添加到所有锚点。 从单击的锚中删除类static。 将活动类添加到单击的锚点。

---

如果您谈论的是动态生成的元素，则需要使用.on方法ok，但要将单击侦听器绑定到元素，如：

$("div.more").on('click', 'a:not(.active)', function () {
    $(this).addClass('active').siblings('.active').removeClass('active').addClass('static');
});

使用：not.active可连接单击ev。未来元素 并确保单击的类尚未处于活动状态。

请尝试：

$("div.more a").on("click", function () {
    $("a.active").removeClass("active").addClass("static");
    $(this).removeClass("static").addClass("active");
});

---

您只需将onclick函数封装在

$(document).ready(function() {});

以便在文档准备好后进行侦听。无论您选择哪种答案或格式：

$(document).ready(function() {
    $("div.more a").click(function () {
        $("a.static").removeClass("static");
        $(this).addClass("active");
    });
});

---

真的很简单

我尝试了以上所有方法，但都没有解决我的问题。不是因为他们不是好榜样，而是因为我不理解这些。然而，我编辑了@Duncanmoo solution，它对我很有用。这可能对你也有用

$(document).ready(function() {
$("ul.arbetstagare a").click(function () {
    $("a").removeClass("active");
    $("a.active").removeClass("static");
    $(this).addClass("active");
});});   

---

不要仅仅因为看不到视觉上的变化就认为类没有被添加。相对于应用于元素的其他css规则，类的css规则可能不够具体。考虑到有状态单击，这是一个更好的选择，看起来它会起作用。但还是没有运气。所有答案都会成功地添加类，直到页面使用新类型循环重新加载。它会在单击时添加类，但当页面使用新项目集重新加载时，它会消失。当然，由于免责声明JS不应该是持久的，它是页面的每一个负载并使用它，否则就是在设计的上下文之外使用它，因此，你应该真正地阅读JS根本上的内容，并考虑你的编程。如果这不是一个很好的使用JS的方法，那么什么是更好的方法呢？当页面刷新时，很明显用户希望从头开始，因此您不应该做任何事情，您应该从服务器获取页面的新副本。尽管此功能有时仍然很有用，比如您创建了一个url x.co.uk/projecttask-123，您可以使用第一个函数上面的函数将其取出，并打开与您试图访问的项目相关联的正确AJAX窗口。

$("div.more a").on("click", function () {
    $("a.active").removeClass("active").addClass("static");
    $(this).removeClass("static").addClass("active");
});

$(document).ready(function() {});

$(document).ready(function() {
    $("div.more a").click(function () {
        $("a.static").removeClass("static");
        $(this).addClass("active");
    });
});

$(document).ready(function() {
$("ul.arbetstagare a").click(function () {
    $("a").removeClass("active");
    $("a.active").removeClass("static");
    $(this).addClass("active");
});});