使点击的链接颜色保持不变

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/

Answer 2

你应该给!important，因为你想用class覆盖css而不是id。
因为id的specificity比class多

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

而且你不能使用$h3 这样的变量来制作点击事件。

你应该添加和删除类到锚标记。

如果你想使用变量，那么你可以像下面这样使用：

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

别忘了包含 JQuery 插件。

Working Fiddle