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来覆盖{1}} 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

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

2 个答案: