Bob SpAce

Be myself!Do myself!

js修改class实现导航当前页高亮

Written By bob

经常遇到需要高亮处理的导航按钮,一般情况下可以通JS对比URL中的后半段地址也所有链接的HREF地址比较,还要做字条对比,但这种方法对于导航会自动变换不句灵活.

以下一种方式,通过ID获取navi下的所有a,遍历比对所有HREF与当前URL,匹配刚添加class属性.具体的class属性自行编写.

<script language=”javascript”>
window.onload=function(){
highlightPage();
}
function highlightPage(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(‘navi’)) return false;
var nav = document.getElementById(‘navi’);
var links = nav.getElementsByTagName(‘a’);
for (var i=0;i<links.length;i++){
var linkurl =  links[i].getAttribute(‘href’);
var currenturl = document.location.href;
if(currenturl.indexOf(linkurl)!=-1){
links[i].className = ‘onfocus’;
return true;
}
}
}
</script>

打赏 分享
取消

如果您觉得我的文章对您有所帮助,欢迎您打赏一点咖啡钱~

扫码支持
您的打赏是我的动力!

打开支付宝扫一扫,即可进行扫码打赏哦~

评论已关闭。