突出显示没有 CSS 的活动链接答案

【问题标题】：Highling active links without CSS突出显示没有 CSS 的活动链接
【发布时间】：2016-11-19 12:59:05
【问题描述】：

我有这些菜单链接，当单击并处于活动状态时，它们会变为灰色并保持颜色不变，直到您离开页面或转到另一个菜单链接。我尝试使用 CSS 通过在每个页面上都有 class = "active" 来告诉活动链接。但是它可以工作，我觉得这不是非常有效和可扩展的，因为你必须在每个菜单链接上写。有没有另一种方法来告诉活动链接并转向颜色说灰色？建议。

.navigation-menu {
  float: center;
  clear: both;
  font-size: 12px
}
.navigation-menu > li {
  margin-right: 3px;
  margin: 100px auto;
  line-height: 20px;
  max-width: 860px;
  display: inline;
}
.navigation-menu li {
  list-style-type: none;
}
.navigation-menu li a {
  background-color: #ffffff;
  display: inline-block;
  padding: 10px 20px;
  color: #696969;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}
.navigation-menu li.active a {
  background-color: grey;
  color: #fff;
}
.navigation-menu li ul {
  display: none;
}
.navigation-menu ul li a {
  padding: 10px 20px;
}
.navigation-menu li:hover ul {
  display: inline-block;
  position: absolute;
  padding: 5px;
}
.navigation-menu li ul li a:hover {
  background-color: black;
  color: white;
  display: block;
}
.navigation-menu li a:hover {
  background-color: black;
  color: white;
}

<ul class="navigation-menu">
  <li class="active"><a href='#'> link1 </a>
  </li>
  <li><a href='#'> Link2 </a>
  </li>
  <li><a href='#'> Link3 </a>
  </li>
  <li><a href='b.php'> Link4 </a>
  </li>
</ul>

【问题讨论】：

激活是指当你点击它或当前的 url 时？
使用 JavaScript onmouseover 事件和你想要的样式。
在父css中使用:active，这样就不用到处添加active类了
@IsmailRBOUH 请运行代码 sn-p。当菜单链接处于活动状态时应保持颜色不变，直到用户离开或移动到下一个菜单链接
维德勋爵讨厌毛茸茸的动物。 :link, :visited, :hover, :focus, :active。愿你永远不会忘记这些链接伪类。

标签： javascript html css

【解决方案1】：

你可以试试这个技巧：在<a>标签内添加tabindex="0"，并使用:focus激活你想要设置样式的CSS代码。

.navigation-menu li a:focus{
  background-color:grey;
}

<ul class="navigation-menu" >
      <li class = "active" ><a href='#' tabindex="0"> link1 </a></li>
      <li><a href='#' tabindex="0"> Link2 </a></li>
      <li><a href='#' tabindex="0"> Link3 </a></li>
      <li><a href='#' tabindex="0"> Link4 </a></li>

    </ul>

这是一个有效的小提琴：https://jsfiddle.net/bf5ojcpt/

【讨论】：

【解决方案2】：

根据您在服务器后台使用的语言，您可以轻松完成此操作。就像在 c# 中一样，您可以找到应用程序的 url，然后您可以将 url 与活动链接文本匹配。要么您可以从页面渲染控制器生成自定义标题并作为字符串匹配到两者

或者在 angularjs 中你可以使用

 ng-class="someVar==0 ?'activeclass':'notactiveclass'"

希望你能从这里找到诀窍或答案

【讨论】：

不幸的是，我正在使用 PHP
我相信这是正确的答案。不过，解释可能有点绕。解决此问题的方法是将当前 url 与链接的 url 进行比较，如果找到匹配项，则将活动状态添加到列表元素。这一切都将在服务器端 (PHP) 完成，您必须确定如何知道当前页面是匹配的。
对不起，我是新手（正在回复）：改进中