js版本好像没实现那个效果。当你页面滚动的时候,导航条没变化
2 回答
检查下你写的代码是否有问题。可以参考:
<script type="text/javascript"> //根据className获取元素 function getByClassName(obj,cls){ //var elements = obj.getElementsByTagName("*"); var elements = obj.getElementsByTagName("*"); /*获取父容器下的所有Dom元素*/ var result = []; for (var i = 0 ; i <elements.length;i++) { if (elements[i].className == cls) { result.push(elements[i]); } } return result } //实现增加删除样式属性 function hasClass( obj, cls){ return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); //字符串包含所需字符 } function removeClass( obj, cls ){ if( hasClass( obj, cls )){ //remove var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)"); obj.className = obj.className.replace(reg, ""); } } function addClass( obj, cls){ if (!hasClass(obj,cls)) { obj.className +=" "+cls; }; } window.onload=function(){ window.onscroll = function(){ var top = document.documentElement ? document.documentElement.scrollTop :document.body.scrollTop; /*在某些XHTML的浏览器下有可能无法获取正确值得意外*/ var menu = document.getElementById("menu").getElementsByTagName("a"); /*getElementByClassName在IE系列浏览器中支持不是很好*/ //var item =document.getElementById("content").getElementByClassName("item"); var items = getByClassName(document.getElementById("content"),"item"); var currentID = ""; for (var i = 0; i < items.length; i++) { var _item = items[i]; var _itemTop = _item.offsetTop; if (top >_itemTop-200) { currentID = _item.id; } else { break; } } if (currentID){ //给menu下正确的a标签添加current属性 for (var j = 0; j<menu.length;j++) { var _menu = menu[j]; var _href = _menu.href.split("#"); //直接通过href获取到的是完整的网址,包括域名等信息,可以通过#分割字符串获取最后一个元素。 //var _href = _menu.href.split("#"); if (_href[_href.length - 1] !=currentID) { removeClass(_menu,"current"); } else { addClass(_menu,"current"); } }; } } } </script>
举报
0/150
提交
取消