Question

我有这些菜单链接，点击并激活时应转为灰色并保持颜色，直到您离开页面或转到另一个菜单链接。我试图通过在每个页面上使用class = "active"来使用CSS来告诉活动链接。然而，它并不是很有效和可扩展，因为你必须在每个菜单链接上写。有没有另一种方法来告诉活动链接并转向颜色说灰色？咨询。

.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>

Answer 1

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

或在angularjs中你可以使用

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

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

Answer 2

您可以尝试这一诀窍：在tabindex="0"标记内添加<a>并使用: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/

没有CSS的Highling活动链接

2 个答案: