<!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>
1 回答
已采纳
学习js
TA贡献85条经验 获得超55个赞
有种东西叫控制台 TypeError: currentLink.removeclass is not a function，你的第40行代码，removeClass,C要大写
- 1 回答
- 0 关注
- 839 浏览
添加回答
举报
0/150
提交
取消