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

课程

/前端开发

/JavaScript

/网页定位导航特效

我的代码不知道为什么运行不了，用的jq库是http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

$(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);
			var itemTop = m.offset().top;
			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");
		}
	});
});


苍白的尾巴

2016-07-21

源自：网页定位导航特效  4-3

关注问题 我要回答
1366
操作
收起

正在回答

3 回答

磅礴 回答被采纳 +3 积分
2016-07-21

内部。
这是把你的复制过来的全部代码，包括JQ库也是你说的那个

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="content-type" content="text/html" >

    <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: #0088bb;

        }

        #content .item{

            padding: 20px;

            margin-bottom: 20px;

            border: 1px dotted #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;

            border: none;

        }

        #menu{

            position: fixed;

            top: 100px;

            left: 50%;

            margin-left: 400px;

            width: 80px;

        }

        #menu li a{

            display: block;

            margin: 5px 0;

            font-size: 14px;

            color: #333;

            width: 80px;

            height: 50px;

            line-height: 50px;

            text-decoration: none;

            font-weight: bold;

            text-align: center;

        }

        #menu ul li a:hover,#menu ul li a.current{

            color: #fff;

            background-color: #0088bb;

        }

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>

        $(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);

                    var itemTop = m.offset().top;

                    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">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=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

        </ul>

    </div>

    <div id="item2">

        <h2>2F 女装</h2>

        <ul>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

        </ul>

    </div>

    <div id="item3">

        <h2>3F 美妆</h2>

        <ul>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

        </ul>

    </div>

    <div id="item4">

        <h2>4F 数码</h2>

        <ul>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

            <li><a href="#"><img src="4F.png" alt=""/></a></li>

        </ul>

    </div>

    <div id="item5">

        <h2>5F 母婴</h2>

        <ul>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

        </ul>

    </div>

</div>

</body>

</html>


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

苍白的尾巴 提问者

我找到了问题了，是menu,我设置的是class，结果调的时候携程调id的了。不过还是谢谢你的帮助。
2016-07-22 回复 有任何疑惑可以回复我~
追觅梦初的国度
2016-07-31 
  menu.find("[href="+currentId+"]").addClass("current");

你这里出问题了，正确的是这样的

  menu.find("[href='"+currentId+"']").addClass("current");

在currentId两边是需要单引号的。

1 回复 有任何疑惑可以回复我~
收起回答
#1

我要成为前端大姐大

href='"+currentId+"'这个位置为什么要这么写呢？？
2016-08-26 回复 有任何疑惑可以回复我~
磅礴
2016-07-21

代码和JQ库都没有问题，这里if (top > itemTop - 200)要这么写，你再试试！

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

苍白的尾巴 提问者

还是不行。应该是什么原因？
2016-07-21 回复 有任何疑惑可以回复我~
#2

磅礴 回复 苍白的尾巴 提问者

我把你的这段jQuery代码拷过来试了一下，我这边完全可以运行。你看看是不是你别的地方有问题
2016-07-21 回复 有任何疑惑可以回复我~
#3

苍白的尾巴 提问者 回复 磅礴

你是外部调用还内部？
2016-07-21 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页定位导航特效
  • 参与学习       71413    人
  • 解答问题       486    个

本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有

进入课程

本课相似问答

2 回答为什么不能用http://libs.baidu.com/jquery/3.1.0/jquery.min.js

1 回答为什么引用jquery库时用老师的http://libs.baidu.com/jquery/1.10.2/jquery.min.js&quot; 程序可以运行，但是使用本地的库src=&quot;js/jquery-3.0.0.js&quot; 且在同一个web项目中，却不能成功运行了？

3 回答为什么我用本地的jQuery库实现不了

2 回答为什么我的Jquery代码显示不出来获取了焦点的效果

1 回答为什么引用jquery-2.2.0.min.js库却不行！！！！求大神解答。。
搜索更多本课相关问答

我的代码不知道为什么运行不了，用的jq库是http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

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