Question

功能要求：

*必须突出显示当前页面

我的菜单是一个列表，所以我在标签中添加了一个类，并使用CSS选择器对其进行不同的样式设置。

    ul ul a.basic { /* Sub-menu stuff */
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: orange; /* Color of Home1-2-3 Background*/
}

ul ul a { /* Sub-menu stuff */
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: green; /* Color of Home1-2-3 Background*/
}

当前活动菜单项有一个＆＃34;基本＆＃34;。我首先将.basic的CSS代码放入，因此它被覆盖并变为橙色。

有没有更好/更有效/理想的方法来做到这一点？通过使用javascript怎么样？

谢谢！

Answer 1

如果您在点击菜单项时重新加载页面，则无需使用JavaScript，只需在代码中放置.active类的机制。

* {
    margin: 0;
    padding: 0;
}
.menu{
  margin:0;
  width: 100%;
  text-align: center;
}
.menu li {
  float: left;
  font-family: sans-serif;
  list-style: outside none none;
}
.menu li a{
  text-decoration: none;
  padding: 10px; 
  display: block;
}
.menu li.active a{
  color: orange;
}

<ul class="menu">
    <li class="active"><a href="#">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">OUR SERVICE</a></li>
</ul>

突出显示菜单最佳实践

1 个答案: