Question

我正在尝试做的是：我有两个链接热/更新。单击热点时，它应变为红色并更新为黑色。单击更新时，它应该变为红色和热变为黑色。

这适用于小提琴，但不适用于我的网站。

我能够在SO上找到各种答案，因为这似乎是一个常见的问题。我一个接一个地实施，但没有一个有效。他们似乎在小提琴中工作得很好但不在我的网上。

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 links的版本：

// 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');
  });
});

这是一个工作小提琴：https://jsfiddle.net/cale_b/tqzt8f7s/1/

Answer 2

因此，为了澄清您希望根据网址是否具有某个查询来突出显示某些按钮。如果网址包含/？sort = score＆amp; page = 1，则突出显示排序;如果网址包含/？sort = date＆amp; page = 1，则突出显示日期。

要做到这一点，您需要做的就是在页面内搜索每个字符串（window.location.search）。这样的事情的代码就是。

const highLightWhat = (window.location.search).search('sort=score') !== -1 ? 'Highlight sort' :
    (window.location.search).search('sort=date') !== -1 ? 'Highlight date' :
    'Highlight Nothing';

然后，此标志可用作参考，以突出显示一个＆＃39; a＆＃39;标签或其他。

我希望这有帮助！（：

Answer 3

尝试此javaScript一次

$(function() {
   $('a.link').click(function(event) {
            event.preventDefault();
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
});

尝试执行a：单击活动以保持直到其他链接

3 个答案: