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

我的JS代碼，，發(fā)現(xiàn)很多同學(xué)都說JS不出來效果，剛開始我也是，，但是后來發(fā)現(xiàn)真的是書寫上的小問題?。〈蠹疫€是仔細(xì)檢查下自己的代碼吧！

<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>網(wǎng)頁定位導(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?h2?{
????????????font-size:?15px;
?font-weight:?bold;
?border-bottom:?2px?solid?#0088bb;
?}

????????#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;
?}

????</style>
????<script>
?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;
?}
????????window.onload?=?function?()?{
????????????window.onscroll?=?function?()?{
????????????????var?top?=?document.documentElement.scrollTop???document.documentElement.scrollTop?:?document.body.scrollTop;
?var?menus?=?document.getElementById("menu").getElementsByTagName("a");
?var?items?=?getByClassName(document.getElementById("content"),?"item");
?var?currentId?=?"";

?for?(var?j?=?0;?j?<?items.length;?j++)?{
????????????????????var?m?=?items[j];
?var?itemTop?=?m.offsetTop;
?if?(top?>?itemTop?-?300)?{
????????????????????????currentId?=?m.id;
?}?else?{
????????????????????????break;
?}
????????????????}

????????????????if?(currentId)?{
????????????????????for?(var?k?=?0;?k?<?menus.length;?k++)?{
????????????????????????var?n?=?menus[k];
?var?_href?=?n.href.split("#");
?if?(_href[_href.length?-?1]?!=?currentId)?{
????????????????????????????n.className?=?"";
?}?else?{
????????????????????????????n.className?=?"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?數(shù)碼</a></li>
????????<li><a?href="#item5">5F?母嬰</a></li>
????</ul>
</div>
<div?id="content">
????<h1>購物網(wǎng)</h1>

????<div?id="item1"?class="item">
????????<h2>1F?男裝</h2>
????????<ul>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="1F.jpg"?alt=""/></a></li>
????????</ul>
????</div>
????<div?id="item2"?class="item">
????????<h2>2F?女裝</h2>
????????<ul>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="2F.jpg"?alt=""/></a></li>
????????</ul>
????</div>
????<div?id="item3"?class="item">
????????<h2>3F?美妝</h2>
????????<ul>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="3F.jpg"?alt=""/></a></li>
????????</ul>
????</div>
????<div?id="item4"?class="item">
????????<h2>4F?數(shù)碼</h2>
????????<ul>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="4F.png"?alt=""/></a></li>
????????</ul>
????</div>
????<div?id="item5"?class="item">
????????<h2>5F?母嬰</h2>
????????<ul>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????????<li><a?href="#"><img?src="5F.jpg"?alt=""/></a></li>
????????</ul>
????</div>
</div>
</body>
</html>

我剛開始的錯誤出在if (_href[_href.length - 1] != currentId)這里，我之前寫成了if (_href[-_href.length - 1] != currentId)，真是太低級的錯誤?。〈蠹乙欢ㄒ屑?xì)。