问答详情
源自:1-2 练习题

跟着视频敲出来的,可是感觉不对,大神们帮忙看看哪出错了呗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 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:red;

}

 #content .item{

 padding:20px;

 margin-bottom:20px;

 border:1px dotted #C00;

 }

 #content .item h2{

 font-size:16px;

 font-weight: bold;

 border-bottom:2px solid #0FF;

 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:80%;

}

#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的兼容问题*/

*html,*html body{

background-image:url(about:blank);

background-attachment:fixed;

}

*html #menu{

position:absolute;

top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+"px");

}

</style>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script>

   /*$(document).ready(function(){

  $(window).scroll(function(){

  var top = $(document).scrollTop();

  var menu = $("#menu");

  var items = $("#content").find(".item");

  var currentId = "";

  items.each(function(){

  var m = $(this);

  var itemTop = m.offset().top;

  if(top > itemTop - 200){

     currentId = "#" + m.attr("id");

  }

   else{

return false;

}

  })

  var currentLink = menu.find(".current");

  if(currentId && currentLink.attr("href") != currentId){

  currentLink.removeClass("current");

  menu.find("[href="+currentId+"]").addClass("current");

  }

  })

  })*/

//根据class name 获取元素,因为IE浏览器对getElementsByClassName()的兼容性不好

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;

}


//由于JS里面没有removeClass和addClass方法,所以需要自己包装两个函数,其中用到正则表达式

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;

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赋值

   if(currentId){

for(var j=0; j<menus.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"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

      </ul>

  </div>

  <div id="item2" class="item">

      <h2>2F 女装</h2>

      <ul>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

      </ul>

  </div>

  <div id="item3" class="item">

      <h2>3F 美妆</h2>

      <ul>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

      </ul>

  </div>

  <div id="item4" class="item">

      <h2>4F 数码</h2>

      <ul>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

      </ul>

  </div>

  <div id="item5" class="item">

      <h2>5F 母婴</h2>

      <ul>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

          <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>

      </ul>

  </div>

</div>

</body>

</html>


提问者:qq_李秀琴_0 2016-01-10 15:03

个回答

  • 李晓健
    2016-01-11 21:03:22
    已采纳

    window.onload = function(){
        var items = getByClassName(document.getElementById("content"),"item");
        var menus = document.getElementById("menu").getElementsByTagName("a");
        window.onscroll = function(){
            var top = !document.documentElement?document.documentElement.scrollTop : document.body.scrollTop;
            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赋值
            if(currentId){
                for(var j=0; j<menus.length; j++){
                    var _menu = menus[j];
                    var _href = _menu.href.split("#");
                    if(_href[_href.length-1] != currentId){
                        removeClass( _menu, "current");
                    }else{
                        addClass( _menu, "current");
                    }
                }
            }
        }
    }


  • 李晓健
    2016-01-10 15:31:07

    //给正确的menu下的a元素class赋值
      if(currentId){
          for(var j=0; j<menus.length; j++){
              var _menu = menus[j];
              //这里添加一下点击事件,处理当前选中的状态  既然你引了 jquery 我就直接用jquery的语法了
              $(_menu).click(function(){
                  $('#menu li a.current').removeClass('current');
                  $(this).addClass('current');
              });
          }
      }


  • 李晓健
    2016-01-10 15:23:11

    没觉得哪里有问题呀