javascript - 使点击的链接颜色停留

Question

我一直试图让点击链接时，颜色停留在那里，而不仅仅是当鼠标点击链接时(如果鼠标失去对链接的关注，颜色会恢复到正常状态).

当您想提问时，颜色会保留在提问选项卡上。

这是我尝试在 JSFiddle 上的代码示例:

HTML

<ul id="parentExample" style="display: block;">
  <asp:Repeater runat="server" ID="uiMenuList">
    <ItemTemplate>
      <li id="childExample">
        <a id="uiMenuText" href="http://www.google.com" target="_blank" runat="server">First Menu</a>
        <a id="uiMenuText" href="http://www.google.com" target="_blank" runat="server">Second Menu</a>
        <a id="uiMenuText" href="http://www.google.com" target="_blank" runat="server">Third Menu</a>
      </li>
    </ItemTemplate>
  </asp:Repeater>
</ul>

JavaScript

$(document.ready(function() {
  var $h3s = $('li').click(function() {
    $h3s.removeClass('active');
    $(this).addClass('active');
  });
}));

CSS

.active {
  background: none;
  color: #FFC000;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a {
  background: none;
  color: black;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a:hover {
  background: none;
  color: red;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a:active {
  background: none;
  color: #FFC000;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a:selected {
  background: none;
  color: #FFC000;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

以上代码示例如下: JS Fiddle

任何帮助将不胜感激

谢谢

Answer 1

试试这个

$(document).ready(function() {
   $('li a').click(function() {
    $('li a').removeClass('active');
    $(this).addClass('active');
  });
});

更改您的 css 类位置。

喜欢

#parentExample li#childExample a {
  background: none;
  color: black;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a:hover {
  background: none;
  color: red;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a:active {
  background: none;
  color: #FFC000;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a:selected {
  background: none;
  color: #FFC000;
  border: 0px;
  margin-top: -3px;
  margin-right: auto;
  margin-left: auto;
}

#parentExample li#childExample a.active {
      background: none;
      color: #FFC000;
      border: 0px;
      margin-top: -3px;
      margin-right: auto;
      margin-left: auto;
    }

https://jsfiddle.net/mzwwrsca/3/