为了账号安全,请及时绑定邮箱和手机立即绑定

js版本好像没实现那个效果。当你页面滚动的时候,导航条没变化

正在回答

2 回答

同没有效果

0 回复 有任何疑惑可以回复我~

检查下你写的代码是否有问题。可以参考:

<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 回复 有任何疑惑可以回复我~
#1

慕用7077196

这个运行也木有效果
2015-02-09 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页定位导航特效
  • 参与学习       71404    人
  • 解答问题       486    个

本课程讲解网页定位导航特效,仿天猫版地狗购物网,你值得拥有

进入课程
意见反馈 帮助中心 APP下载
官方微信