导航高亮
html部分
<ul class="headbar" id="all-headbar">
<li class="headbar"><a href="{{url_for('index')}}" id="after-headbar"><b>主页</b></a></li>
<li class="headbar"><a href="{{url_for(‘')}}"><b>知识</b></a></li>
<li class="headbar"><a href="{{url_for('')}}"><b>讨论</b></a></li>
<li class="headbar"><a href="{{url_for('')}}"><b>作品</b></a></li>
<li class="headbar"><a href="{{url_for('')}}"><b>支持</b></a></li>
<li class="headbar"><a href="{{url_for('')}}"><b>分享</b></a></li>
js部分
//获取div下面所有的a标签(返回节点对象)
var myNav = document.getElementById("all-headbar").getElementsByTagName("a");
//获取当前窗口的url
var myURL = document.location.href;
//循环div下面所有的链接,
for(var i=1;i<myNav.length;i++){
//获取每一个a标签的herf属性
var links = myNav[i].getAttribute("href");
var myURL = document.location.href;
//查看div下的链接是否包含当前窗口,如果存在,则给其添加样式
if(myURL.indexOf(links) != -1){
myNav[i].id='after-headbar';
myNav[0].id='';
}
}
上述是li添加id的方法,添加class的方法是以下:
https://blog.csdn.net/shuay/article/details/50750606