javascript-通过<；突出显示当前菜单项；部门>；内部<；a>；

我想通过javascript在链接中使用div类突出显示当前菜单项。在第一次尝试中，我只是将类“top bar underline”添加到a-tag中，但由于菜单项是“display:block”；这样下划线就超过了菜单项的字体，我将下划线放在a-tag中的div容器中。 对于悬停效果，这非常好

问题是：

如何将“当前顶栏下划线”类添加到当前活动菜单项的“顶栏下划线”类中？

---

我当前的代码如下所示：

html菜单：

<ul class="right">                
                <li>
                    <a href="{{ site.url }}"><div class="top-bar-underline">LATEST</div></a>
                </li>
                <li>
                    <a href="{{ site.url }}/pages/about/"><div class="top-bar-underline">ABOUT</div></a>
                </li>

</ul>

<script type="text/javascript">
var url = window.location.href;
$('.top-bar-section li:not(.has-form) a:not(.button)').filter(function() {
    return this.href == url;
}).addClass('top-bar-underline-current');
</script>

.top-bar-underline {
position: relative;
color: #ff3296;
}
.top-bar-underline:after {
display: block;
position: absolute;
top: 70%;
left: 0;
width: 100%;
height: 2px;
background: rgba($body-font-color,0.9);
content: '';
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-moz-transition: opacity 0.2s, -moz-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
.top-bar-underline:hover {
color: #98004a;

}
.top-bar-underline:hover:after,
.top-bar-underline:focus:after {
 width: 100%;
 opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.top-bar-underline-current {
position: relative;
}
.top-bar-underline-current:after {
position: absolute;
top: 70%;
left: 0;
width: 100%;
height: 2px;
background: rgba($body-font-color,0.9);
content: '';
opacity: 1;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-moz-transition: opacity 0.2s, -moz-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.top-bar-underline-current:hover:after,
.top-bar-underline-current:focus:after {
width: 100%;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}

谢谢你的帮助

var url = window.location.href;
$('.top-bar-section li:not(.has-form) a:not(.button)').filter(function() {
    return this.href == url;
}).find('.top-bar-underline').addClass('top-bar-underline-current');

---

我想这就是你需要的……

也许你没有看到问题所在：。大量突出显示活动页面的示例。在本例中，您将向选择器添加div，甚至可以包含类名，但是。。。span标记是添加div的最佳实践，值得思考。要添加到RandomUs1r编写的内容中，link/anchor元素是内联的，不应该包含div之类的块元素，因此使用span而不是。谢谢提示。我想我需要重新考虑我的highlightnight方法，反正有点夸张！