为活动的 a href 设置不同的 CSS 样式 [重复]答案

【问题标题】：set different CSS style for active a href [duplicate]为活动的 a href 设置不同的 CSS 样式 [重复]
【发布时间】：2019-12-26 12:25:06
【问题描述】：

如何为菜单栏中的活动链接设置不同的 CSS 样式？我做了这个造型。

a.selected {
  color: red;
  background: #efefef;
}
<ul>
  <li><a href="villblock.aspx">villa</a></li>
  <li><a href="lateFine.aspx" class="selected">fine</a></li>
</ul>

CSS 效果仅在lateFine.aspx 中显示，但当我单击其他链接时，CSS 效果不显示。如何制作这种 CSS 效果，即更改活动链接的 CSS 样式？

【问题讨论】：

这将是您的服务器端语言 - 将selected 类添加到您的链接是什么？
“但是当我点击其他链接时，没有显示 CSS 效果” - 不清楚你的意思。所以你现在在 villblock.aspx - 你是否相应地更改了 HTML，以便 that 链接元素现在具有 selected 类？
你的意思是悬停而不是点击？因为当你点击它时，你会被导航走。

标签： css href

【解决方案1】：

您可以使用 jquery 或 javascript 添加和删除类 onclick 事件。

$("#villa").click(function(){
$("#villa").addClass('selected');
$("#fine").removeClass('selected');
})

$("#fine").click(function(){
$("#fine").addClass('selected');
$("#villa").removeClass('selected');
})

.selected {
  color: red;
  background: #efefef;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a  id="villa">villa</a></li>
  <li><a  id="fine">fine</a></li>
</ul>

【讨论】：

但是他们会导航到一个新页面，所以这不起作用
是的，如果他想导航到新页面，那么不需要添加或删除任何类。
我认为问题是他如何将所选类添加到新页面上的链接中，但 OP 需要澄清
哦，好吧，@Pete。会先等待他的澄清。