js代码实现当前导航高亮跳转不跳转两种方法
网上找了很多有很多方法
1.新窗口后显示高亮
就是代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript"> var url=window.location.href; if(url.indexOf("#vr") >= 0 ){ //判断url地址中是否包含tag字符串,如果包含将改写元素标签id为nav0和nav1的class样式名称 $('#vr1').attr('class','current-menu-item'); } else if(url.indexOf("#jingguan") >= 0 ){ //判断url地址中是否包含tag字符串,如果包含将改写元素标签id为nav0和nav1的class样式名称 $('#jingguan1').attr('class','current-menu-item');//给id是jingguan1增加class名称是current-menu-item } else if(url.indexOf("#jianzhu") >= 0 ){ //判断url地址中是否包含tag字符串,如果包含将改写元素标签id为nav0和nav1的class样式名称 $('#jianzhu1').attr('class','current-menu-item'); } else if(url.indexOf("#gongzhuang") >= 0 ){ //判断url地址中是否包含tag字符串,如果包含将改写元素标签id为nav0和nav1的class样式名称 $('#gongzhuang1').attr('class','current-menu-item'); } else if(url.indexOf("#jiazhuang") >= 0 ){ //判断url地址中是否包含tag字符串,如果包含将改写元素标签id为nav0和nav1的class样式名称 $('#jiazhuang1').attr('class','current-menu-item'); } </script> |
给需要高亮的链接加上id 修改当前css 变成高亮效果
1 | <a id="" target="_blank"></a> |
2.当前页面点击后高亮
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script language="javascript" type="text/javascript"> var $c=function(array){var nArray = [];for (var i=0;i<array .length;i++) nArray.push(array[i]);return nArray;}; Array.prototype.each=function(func){ for(var i=0,l=this.length;i<l;i++) {func(this[i],i);}; }; document .getElementsByClassName=function(cn){ var hasClass=function(w,Name){ var hasClass = false; w.className.split(' ').each(function(s){ if (s == Name) hasClass = true; }); return hasClass; }; var elems =document.getElementsByTagName("*")||document.all; var elemList = []; $c(elems).each(function(e){ if(hasClass(e,cn)){elemList.push(e);} }) return $c(elemList); }; function change_bg(obj){ var a=document.getElementsByClassName("xiaoguotu_tab")[0].getElementsByTagName("a"); for(var i=0;i<a.length;i++){a[i].className="";} obj.className="current-menu-item"; } </script> |
div代码绑定当前高亮代码
1 2 | <a href="#vr" class="current-menu-item" onclick="change_bg(this)">VR效果图</a> <a href="#jingguan" onclick="change_bg(this)" >景观效果图</a> |
注意修改控制范围class名称还有绑定TagName
浅唱6(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!
相关信息
本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。
如有需要请加QQ: 909912499