menu.find([href=+ currentId +]).addClass("current");怎么改？-慕课网

menu.find([href=+ currentId +]).addClass("current");怎么改？

来源：4-3 使用jQuery实现网页定位导航（下）

keveon

2016-12-19 15:20

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>地狗购物网——网页定位导航</title>
   <style type="text/css">
       *{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 solid #0088bb;
       }
       #content h2{
           font-size: 16px;
           font-weight: bold;
           border-bottom: 2px solid #0088bb;
           margin-bottom: 10px;
       }
       #content .item li{
           display: inline;
           margin-right: 10px;
       }
       #content .item li a img{
           width: 230px;
           height: 230px;
       }
       #menu{
           position: fixed;
           top: 100px;
           left: 50%;/*定位在页面中部*/
           margin-left: 400px;/*中部偏移400px,.item宽800*/
           width: 80px;
       }
       #menu ul li a{
           display: block;
           margin:5px;
           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 src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript" src="">
       $(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);/*item*/
                   var itemTop=m.offset().top;/*获取高度*/
                   if(top>itemTop-180){/*滑动高度大于item高度*/
                       currentId="#"+m.attr("id");/*确定锚点*/
                   }else{
                       return false;
                   }
               });
               //给相应楼层的a 设置 current，取消其他链接的current
               var currentLink=menu.find(".current");/*锚点目前位置*/
               if(currentId&&currentLink.attr('href')!=currentId){
                   currentId.removeClass('current');
                   menu.find([href=+ currentId +]).addClass("current");
               }
           })
       })
   </script>
</head>
<body>
<div id="menu">
   <ul>
       <li><a href="#item1">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">
       <h2>1F 男装</h2>
       <ul>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
           <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
       </ul>
   </div>

   <div id="item2">
       <h2>2F 女装</h2>
       <ul>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
           <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
       </ul>
   </div>

   <div id="item3">
       <h2>3F 美妆</h2>
       <ul>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
           <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
       </ul>
   </div>

   <div id="item4">
       <h2>4F 数码</h2>
       <ul>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
           <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
       </ul>
   </div>

   <div id="item5">
       <h2>5F 母婴</h2>
       <ul>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
           <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
       </ul>
   </div>
</div>
</body>
</html>