Html 如何保持活动菜单项的下划线？

我对HTML和CSS真的很陌生。我有一个导航栏，它在你悬停的菜单项下加了下划线，中间有淡入淡出的效果， 但是，我怎样才能保持活动菜单项的下划线具有相同的样式

我还使用Typo3/Fluid创建html代码，并将“active”类指定给活动菜单项

到目前为止，情况是这样的：

css

---

您需要使用javascript来实现这一点

您的javascript将向相关菜单项添加一个类，如

active

，然后您可以使用css对其进行适当的样式设置

将

active

类添加到元素后，要应用橙色样式，请使用以下命令：

div#top_nav.active a{
    color: orange;
}

注意添加了

.active

，它只选择活动项，并且在链接上省略了

：hover

，因为您不再关心hover

您可能会发现

，

css操作符在这里很有用，可以将相同的样式应用于不同的选择器（活动和悬停），如下面的示例所示：

var items=document.getElementsByClassName（'item'）；
var activeClassName='active'；
函数unselectItems（）{
对于（var i=0；i

span{
边框：1px纯黑；
填充物：5px；
}
span：悬停，span.active{
颜色：白色；
背景色：黑色；
}

家
关于
接触

希望这对您有所帮助。我添加了这个简单的元素

div#top#u nav a:悬停：在之前，div#top#u nav a.活动：在之前

a{
文字装饰：无；
}
俯视导航{
文本对齐：居中；
}
部门#顶部(导航李){
显示：内联；
填充：15px；
}
俯视导航a{
显示：内联块；
位置：相对位置；
}
俯视导航a：悬停{
颜色：橙色；
}
俯视导航a：前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：2倍；
底部：-3px；
左：0；
背景颜色：橙色；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.15秒都可轻松输入输出0秒；
过渡：所有0.15秒均缓进0秒，缓出0秒；
}
俯视导航a：悬停：在前，俯视导航a。活动：在前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
.主动{
颜色：橙色；
}

该类是一个不错的选择，但您是否需要Javascript完全取决于此菜单的工作方式。如果选择一个项目只是重新加载整个页面，那么服务器只需要将该类添加到活动项目中，而不涉及任何Javascript。将活动类添加到所选菜单项中已经开始工作。菜单项已将其颜色变为橙色。我只是想知道，怎样才能使所选菜单项的下划线与我定义的下划线相同？我知道，我不知道您已经添加了一个类。我已经更新了我的答案。HTML在哪里？菜单中是否包含Javascript（动态加载内容等）？如果可能，请与我们分享，这样任何人都可以轻松地帮助您使用当前代码。是的，这正是我想要的。我试了很多次（应该已经发布了我的尝试），结果它几乎和你一样，我只是忘了在逗号后面写div#top_nav，想知道为什么它不起作用>。谢谢你的帮助！我很高兴它为你工作。实际上，我的最新项目也有相同的场景。这是一个非常好看的网站。我修改了它，使当前活动的链接加下划线。有没有办法停止对当前活动链接的影响，这样我就不会得到2行？

div#top_nav.active a{
    color: orange;
}