javascript - 试图做一个 :active to stay on untill other link is clicked

Question

我想做的是:我有两个热链接/更新链接。单击热时，它应变为红色并更新为黑色。单击更新时，它应该变成红色和热变成黑色。

这适用于 Fiddle，但不适用于我的网站。

我能够在 SO 上找到各种答案，因为这似乎是一个常见的问题。我正在一个一个地实现，但它们都不起作用。它们似乎在 fiddle 中运行良好，但在我的网络上却不行。

HTML:

<div id="Space" >
  <ul>
    <li role="presentation" class="sort">
      <a class="link" href="/?sort=score&page=1" style="text-decoration:none;">hot</a>
    </li>    
    <li role="presentation" class="date">
      <a class="link" href="/?sort=date&page=1" style="text-decoration:none;">update</a>
    </li>
  </ul>
</div>

JavaScript:

$(function() {
  var links = $('a.link').click(function() {
    links.removeClass('active');
    $(this).addClass('active');
  });
});

CSS:

a.link.active { color: red; }
a, a:visited { color: black }

现在，这就是 a:active 所做的，它不会保持红色。

Answer 1

var links = 并不像您想象的那样。

你认为它是这样做的:

var links = $('a.link');

但是，由于您将其分配给实际的点击事件，因此不会生成该选择器。

您需要修改您的代码如下:

// This is a "safer" document ready, to prevent conflicts with other $ libraries
jQuery(function($) {
  $('a.link').click(function() {
    // Remove the class from all other links
    $('a.link').removeClass('active');
    // Add the class to _just this link_
    $(this).addClass('active');
  });
});

或者，保留 var 链接的版本:

// This is a "safer" document ready, to prevent conflicts with other $ libraries
jQuery(function($) {
  // Assign all links to the "links" variable
  var links = $('a.link');
  links.click(function() {
    // Remove the class from all other links
    links.removeClass('active');
    // Add the class to _just this link_
    $(this).addClass('active');
  });
});

这是一个工作 fiddle :https://jsfiddle.net/cale_b/tqzt8f7s/1/