求大家帮看下，和老师写的一样，也就变量顺序不一样，不能实现滚动定位，复制过来可以，可是我写的一样啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>森锦套装</title>
<style>
* { margin:0px; padding:0px; }
body { font-size: 17px; line-height: 1.7; }
li { list-style: none; }
#content { width: 800px;margin: 0 auto;padding: 20px;}
#content h1 {color: chartreuse; }
#content .item {padding: 20px;border: 1px dotted #b3d4fc;}
#content .item li {display: inline;margin-right: 10px;}
#content .item li a img {width: 230px;height: 230px;}
#content .item h2 {font-size: 16px;font-weight:bold;border-bottom: 2px solid #b3d4fc;margin-bottom: 10px;}
#menu {position: fixed;top:200px;left: 50%;margin-left: 400px;}
#menu ul li a {display: block;margin: 5px 0;font-size: 14px;font-weight: bold;color:#222222;
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 src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var top = $(document).scrollTop();
var menu = $("#menu");
var items = $("#content").find(".item");
var currentId = ""; //当前楼层ID
items.each (function () {
var m = $(this);
if (top > m.offset().top - 300){
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");
}
});
});
</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 野兽装</a></li>
<li><a href="#item5">5F 精灵装</a></li>
</ul>
</div>
<div id="content">
<h1>森锦套装</h1>
<div id="item1" class="item">
<h2>1F 女装</h2>
<ul>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="1.jpg" alt=""></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 男装</h2>
<ul>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 天使装</h2>
<ul>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 野兽装</h2>
<ul>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 精灵装</h2>
<ul>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>
慕粉00585461371回答
-
学习js
有种东西叫控制台 TypeError: currentLink.removeclass is not a function，你的第40行代码，removeClass,C要大写
随时随地看视频慕课网APP
相关分类
JQuery