                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /網頁定位導航特效

跟著視頻敲出來的，可是感覺不對，大神們幫忙看看哪出錯了唄

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

<head>

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

? ?/*$(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>

? ? <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>

? <h1>購物網</h1>

? <div id="item1" class="item">

? ? ? <h2>1F 男裝</h2>

? ? ? <ul>