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

哪位大神來解救我呀！找了一上午的bug沒找到懷疑是不是不兼容啊，我的js jq做得焦點全部沒有反應(yīng)啊，左邊滾動的時候，右邊焦點沒有定焦，也么有背景顏色，幫我看看錯哪里辣？一個個都是沒顏色,

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>網(wǎng)頁定位導(dǎo)航導(dǎo)航效果</title>
?? ?</head>
?? ?<style type="text/css">
?? ??? ?*{padding:0; margin:0;}
?? ??? ?body{
?? ??? ??? ?font-size:12px;
?? ??? ??? ?line-height:1.7;
?? ??? ?}
?? ??? ?li{list-style:none;}
?? ??? ?
?? ??? ?#content{
?? ??? ??? ?width:800px;
?? ??? ??? ?margin:0 auto;
?? ??? ??? ?padding:20px;
?? ??? ?}
?? ??? ?#content h1{
?? ??? ??? ?color:#224444;
?? ??? ?}
?? ??? ?#content .item{
?? ??? ??? ?padding:20px;
?? ??? ??? ?margin-bottom:20px;
?? ??? ??? ?border:1px solid #269ABC;
?? ??? ?}
?? ??? ?#content .item h1{
?? ??? ??? ?font-size:16px;
?? ??? ??? ?font-weight:bold;
?? ??? ??? ?border-bottom:2px solid #0088bb;
?? ??? ??? ?margin-bottom:10px;
?? ??? ?}
?? ??? ?#content .item li{
?? ??? ??? ?display:inline;
?? ??? ?}
?? ??? ?#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:#ccc;
?? ??? ??? ?width:88px;
?? ??? ??? ?height:50px;
?? ??? ??? ?line-height:50px;
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?text-align:center;
?? ??? ?}
?? ??? ?#menu ul li a:hover,
?? ??? ?#menu ul li a .current{
?? ??? ??? ?color:#fff;
?? ??? ??? ?background-color:#0088bb;
?? ??? ?}
?? ?</style>

/*?? ?$(document).ready(function(){
?? ??? ??? ?$(window).scroll(function(){
?? ??? ??? ??? ?var top = $(document).scrollTop();
?? ??? ??? ??? ?var menu = $("#menu");
?? ??? ??? ??? ?var items = $("#content").find(".item");
?? ??? ??? ??? ?var currentId="";?? //給樓層item設(shè)置id
?? ??? ??? ??? ?
?? ??? ??? ??? ?items.each(function(){
?? ??? ??? ??? ??? ?var t= $(this);
?? ??? ??? ??? ??? ?var itemtop = t.offset().top;
?? ??? ??? ??? ??? ?if(top > itemtop-200){
?? ??? ??? ??? ??? ??? ?currentId = "#"+ t.attr("id"); ?
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?});
?? ??? ??? ??? ?//給相印的樓層a設(shè)置current,取消其他相關(guān)的current
?? ??? ??? ?//?? ?console.log(top);
?? ??? ??? ??? ?var currentlink = menu.find(".current");
?? ??? ??? ??? ?if(currentId && currentlink.attr("href") != currentId){
?? ??? ??? ??? ??? ?currentlink.removeClass("current");
?? ??? ??? ??? ??? ?menu.find("[href="+currentId+"]").addClass("current");
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ?});
?? ??? ?
*/

</script>
?? ?<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>地購購物</h1>
?? ??? ??? ?<div id="item1" class="item">
?? ??? ??? ??? ?<h1>1F 女裝</h1>
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/JM.ico" alt=""/></a></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<div id="item2" class="item">
?? ??? ??? ??? ?<h1>2F 男裝</h1>
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/1H.ico" alt=""/></a></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<div id="item3" class="item">
?? ??? ??? ??? ?<h1>3F 母嬰</h1>
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../img/DD.ico" alt=""/></a></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ???