为了账号安全,请及时绑定邮箱和手机立即绑定

求大神找出我到底哪里错了 自己找了3遍没找出

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>地狗购物网-网页定位导航效果</title>

<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:#F36  }

#content  .item{

    padding:20px;

margin-bottom:20px

border: 1px solid #C63;

               }

#content .item h2{ font-size:16px;

                font-weight:bold;

border-bottom:2px solid #963;

margin-bottom:10px;

}

#content .item li{

display:inline ;

margin-right:10px;

}

#content .item li a img{

width: 230px;

height: 230px;

border: mone;

}

#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:#F6C;

width:80px;

height:50px;

line-height:50px;

text-decoration:none;

text-align:center

}

#menu ul li a:hover,

#menu ul li .current{

color:#FFF;

background:#F69;

}

</style>

<script src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>

<script>

$(document).ready(function(){

$(window).scroll(function(){

  var top =$(document).scrollTop();

//console.log(top)

var menu=$('#menu');

var items =$('#content').find('.item');

var currentId= '' ;

items.each(function(){

var m = $(this);

var  itemTop =m.offset().top;

//console.log( itemTop)

 

 

 if(top >  itemTop){

  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'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             <li><a href='#'><img src='1.jpg'></a></li>

             </ul>

       </div>

              <div id='item2' class="item">

         <h2>2F 女装<h2>

             <ul>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             <li><a href='#'><img src='2.jpg'></a></li>

             </ul>

       </div>

              <div id='item3' class="item">

         <h2>3F 美妆<h2>

             <ul>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             <li><a href='#'><img src='3.jpg'></a></li>

             </ul>

       </div>

              <div id='item4' class="item">

         <h2>4F 数码<h2>

             <ul>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             <li><a href='#'><img src='4.jpg'></a></li>

             </ul>

       </div>

              <div id='item5' class="item">

         <h2>5F 母婴<h2>

             <ul>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             <li><a href='#'><img src='5.jpg'></a></li>

             </ul>

       </div>

       

      

    



</div>

</body>

</html>


正在回答

5 回答

不好意思 我刚才看错了 我是引入的本地的   是menu.find('[href="+ currentId +"]').addClass('current')错了,改成"[href="+ currentId +"]"就好了,这样是有效的,但是我看评论有说要再加单引号的,"[href='"+ currentId +"']"这样应该更好吧,不知是否与jquery版本有关

0 回复 有任何疑惑可以回复我~

谢谢!find("[href='" +currentId+ "']")


1 回复 有任何疑惑可以回复我~

最新版本只支持这种写法"[href='"+ currentId +"']"

0 回复 有任何疑惑可以回复我~
#1

臭臭臭臭家伙

换成这种写法,也没有更换效果
2016-10-23 回复 有任何疑惑可以回复我~

我刚刚试了一下,果然是这个问题, 你真棒啊

请问下 单双引号的作用不是一样的吗 ?

不是当一个引号下有另一个引号的时候 

换一下里面引号的单双引号就行了?

0 回复 有任何疑惑可以回复我~

script引入错误了 jquery-1.10.2,你写成/了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

求大神找出我到底哪里错了 自己找了3遍没找出

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信