Question

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

这是WP循环

<div class="more">
    <a class="static" href="<?php bloginfo('template_url'); ?>/work/">ALL</a>           
    <?php
    foreach ($tax_terms as $tax_term) {
    echo '<a class="static" href="' . esc_attr(get_term_link($tax_term, $taxonomy)) . '" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a>';
    } ?>
</div>

生成此html：

<div class="more">
    <a class="static" href="#">ALL</a>
    <a class="static" href="#">Things</a>
    <a class="static" href="#"> More Things</a>
    <a class="static" href="#">Objects</a>
    <a class="static" href="#">Goals</a>
    <a class="static" href="#">Books</a>
    <a class="static" href="#">Drawings</a>
    <a class="static" href="#">Thoughts</a>
</div>

JQuery的：

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

我已经恢复了其他类似的问题here和here，但这两种解决方案都不适用于我。这可以用JQuery完成，还是应该在html内联锚点中放置一个click事件？

在页面重新加载之前，它看起来只是工作了一秒钟。

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

它通过在url中传递变量来加载一组项目。例如，当您点击内容时，它会在网址中传递?type=airports以获取特定的相关帖子。

更新

也许有更好的方法来实现这一目标。总体目标是向用户显示他们在查看结果集时单击的链接。因此，当点击“THING”时，链接有绿色背景和白色类型等。由于JQuery正在删除页面重新加载的添加类，php会是更好的解决方案吗？

更新2

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

Answer 1

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

$(this)表示当前点击的对象。

我无法解释添加课程不工作的事情。我只是尝试了最新的jquery，它正在工作。你确定它没有添加活动吗？

修改

$(function(){
    $("div.more a").forEach(function(i){
        var active = window.location.hash;

        if($(this).text() == active){
            $(this).trigger('click');
        }
    });
});

然后亚历山大从我下面的答案中无耻地偷走了：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) {

否则它将无效。

Answer 2

我会这样做：

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

从所有主页中删除课程active。
将班级static添加到所有主持人。
从点击的锚点中删除班级static。
将类active添加到点击的锚点。

Answer 3

如果您正在讨论动态生成的元素，则需要使用.on()方法（ok），但将点击侦听器绑定到a元素，如：

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

使用a:not(.active)附加点击ev。未来的元素并确保点击的单词不具有课程active。

Answer 4

尝试：

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

Answer 5

您只需要在

中包装onclick功能

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

一旦文档准备就绪，它就会监听。无论您选择哪种答案或格式：

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

真的很简单

Answer 6

我尝试了以上所有，但上述都没有解决我的问题。不是因为他们不是好榜样，而是因为我不明白这些。但是我编辑了@Duncanmoo解决方案，它对我有用。这对你也有用。

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

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

6 个答案:

修改