我想通过 javascript 使用链接内的 div 类突出显示当前菜单项。在第一次尝试中,我只是将“top-bar-underline”类添加到 a-tag,但由于菜单项是“display: block;”这样下划线就超过了菜单项的字体,我把下划线放在a标签内的div容器中。 对于悬停效果,这非常有效。
问题:
如何将“top-bar-underline-current”类添加到当前事件菜单项的“top-bar-underline”类?
我当前的代码如下:
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>
在菜单中高亮显示当前a的js:
<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>
CSS:
.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');
我想这就是你需要的......
关于javascript - 通过 <a> 内的 <div> 突出显示当前菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25318296/