课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

那里错了？

来源：6-4 编程练习

咖啡学者

2017-03-28 19:19

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>地狗购物网——网页定位导航效果</title>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 12px;
            line-height: 1.7;
        }
        li {
            list-style: none;
        }
        #content {
            width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #content h1 {
            color: #0088bb;
        }
        #content .item {
            padding: 20px;
            margin-bottom: 20px;
            border: 1px dotted #0088bb;
        }
        #content .item h2 {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 2px solid #0088bb;
            margin-bottom: 10px;
        }
        #content .item li {
            display: inline;
            margin-right: 10px;
        }
        #content .item li a img {
            width: 230px;
            height: 230px;
            border: none;
        }
        #menu {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: 400px;
            width: 80px;
        }
        #menu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }
        #menu ul li a:hover,
        #menu ul li a.current {
            color: #fff;
            background: #0088bb;
        }
        /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }
        * html #menu {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }
</style>
<script>
    
  //定义getByClassName函数，让函数实现根据class name获取对象并返回
  function getByClassName(obj,cls){
      var elements = obj.getElementsByTagName("*");
      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.scrollTop || document.body.scrollTop;
            
            var menus = document.getElementById("menu").getElementsByTagName("a");
            
            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;
                }            
            }
        
                             
      //请补充此处代码，给正确的menu下的a元素class赋值current
        if(currentId){
            for(var j = 0; j<menu.length; j++){
                var _menu = menus[j];
                var _href = _menu.href.split("#");
                if(_href[_href.length-1] != currentId){
                    removeClass(_menu,"current");
                }else{
                    addClass(_menu,"current");
                }
            }
        }
      
    
        }    
    }    
</script>
</head>
<body>
<div id="menu">
<ul>
<!--运用锚点，实现导航定位。-->
<li><a href="#item1" class="current">1F 男装</a></li>
<li><a href="#item2">2F 女装</a></li>
<li><a href="#item3">3F 美妆</a></li>
<li><a href="#item4">4F 数码</a></li>
<li><a href="#item5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>地狗购物网</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
</ul>
</div>


写回答 关注

1回答

  • 咖啡学者
    2017-03-28 19:51:56

    问题找到了。 j<menu.length;
     menu改为menus。

    0 0

网页定位导航特效

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

71404 学习 · 486 问题

查看课程

相似问题

哪里错了？？找错真的眼睛都看花了

回答 1

求告知错在哪里了

回答 3

窗口滚动怎么不出效果，真是看不出来，那里面错了！对比那几次也没找到问题

回答 7

实现不了啊亲，卡在这里好久了，哪里出错了呢~

回答 3

求大神帮我找错，新手找了好几遍都找不到哪里错了。

回答 2

打开慕课网App查看更多内容