                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁(yè)定位導(dǎo)航特效

各位大佬幫忙看一下,實(shí)在找不出錯(cuò)在哪里,可就是不能實(shí)現(xiàn)

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>地狗購(gòu)物網(wǎng)——網(wǎng)頁(yè)定位導(dǎo)航效果</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函數(shù)，讓函數(shù)實(shí)現(xiàn)根據(jù)class?name獲取對(duì)象并返回
??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,?"");
		}
	}
	
	
????//定義addClass函數(shù)，讓函數(shù)實(shí)現(xiàn)給對(duì)象增加class?
????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;
				}		
			}
		
			?				
??????//請(qǐng)補(bǔ)充此處代碼，給正確的menu下的a元素class賦值current
????????????if(currentId){
????????????????for(var?j=0;j<menus.lentgh;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>
<!--運(yùn)用錨點(diǎn)，實(shí)現(xiàn)導(dǎo)航定位。-->


<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?數(shù)碼</a></li>
<li><a?href="#item5">5F?母嬰</a></li>
</ul>
</div>
<div?id="content">
<h1>地狗購(gòu)物網(wǎng)</h1>

<div?id="item1"?class="item">
<h2>1F?男裝</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item2"?class="item">
<h2>2F?女裝</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item3"?class="item">
<h2>3F?美妝</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item4"?class="item">
<h2>4F?數(shù)碼</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg"?alt=""/></a></li>
</ul>
</div>
<div?id="item5"?class="item">
<h2>5F?母嬰</h2>
<ul>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
<li><a?href="#"><img?src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg"?alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>