我找了很久，都不知道哪里出錯(cuò)了。firebug也沒(méi)有報(bào)錯(cuò)，請(qǐng)問(wèn)出現(xiàn)這樣的錯(cuò)誤要如何調(diào)試？
<!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;
? ? ? ? }
? ? ? ?
/*請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單在右側(cè)絕對(duì)定位顯示*/
? ? ? ? #menu{
? ? ? ? ? ? position:fixed;?
? ? ? ? ? ? top:100px;
? ? ? ? ? ? left:50%;
? ? ? ? ? ? margin-left:400px;
? ? ? ? }
? ? ? ? #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 src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
function getByClass(obj,cla){
var elements=obj.getElementsByTagName('*');
var result=[];
for(var i=0;i<elements.length;i++){
if(elements[i].className==cla){
result.push(elements[i]);
}
}
return result;
}
? ? ? ?
? ? ? ? ? ? //滾動(dòng)條發(fā)生滾動(dòng)時(shí)，要獲取相應(yīng)的值。
window.onload=function(){
window.onscroll=function(){
var Lis=document.getElementById('menu').getElementsByTagName('a');
var items=getByClass(document.getElementById('content'),'item');
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;
}
}
if(currentId){
for(var j=0;j<Lis.length;j++){
var _Lis=Lis[j];
var _href=_Lis.href.split("#");
if(_href[_href.length-1]!=currentId){
_Lis.removeClass="current";
} else{
_Lis.addClass='current';
}
}
}
}
}
? ? ? ? ? ?
? ? ? ? ? ? //請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單實(shí)現(xiàn)在滾動(dòng)條滾動(dòng)的時(shí)候自動(dòng)設(shè)置焦點(diǎn)
? ? ? ? ? ? //給相應(yīng)樓層的a 設(shè)置 current，取消其他鏈接的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>
2016-08-15
把class的添加移除方法改下就可以了，你用的是JQ的方法，JS的沒(méi)有這個(gè)用法
<!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; ????????} ??????? /*請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單在右側(cè)絕對(duì)定位顯示*/ ????????#menu{ ????????????position:fixed;? ????????????top:100px; ????????????left:50%; ????????????margin-left:400px; ????????} ????????#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?src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <script> ????function?getByClass(obj,cla){ ????????var?elements=obj.getElementsByTagName('*'); ????????var?result=[]; ????????for(var?i=0;i<elements.length;i++){ ????????????if(elements[i].className==cla){ ????????????????result.push(elements[i]); ????????????} ????????} ????????????return?result; ????} ??????? ????????????//滾動(dòng)條發(fā)生滾動(dòng)時(shí)，要獲取相應(yīng)的值。 ????window.onload=function(){ ????window.onscroll=function(){ ????????var?Lis=document.getElementById('menu').getElementsByTagName('a'); ????????var?items=getByClass(document.getElementById('content'),'item'); ????????var?top=document.documentElement.scrollTop???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; ????????} ????} ????if(currentId){ ????for(var?j=0;j<Lis.length;j++){ ????var?_Lis=Lis[j]; ????var?_href=_Lis.href.split("#"); ????if(_href[_href.length-1]!=currentId){ ????????_Lis.className?=?"?"; ????}else{ ????????_Lis.className?='current'; ????????????} ?????????} ????????} ????} } ??????????? ????????????//請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單實(shí)現(xiàn)在滾動(dòng)條滾動(dòng)的時(shí)候自動(dòng)設(shè)置焦點(diǎn) ????????????//給相應(yīng)樓層的a?設(shè)置?current，取消其他鏈接的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>2016-08-10
top獲取不正確
var top=document.documentElement.scrollTop||document.body.scrollTop;
試一下！