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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

body,p,h2,h3,ul,ul,li{padding: 0;margin: 0;}

img{border: none;vertical-align: top;}

li{list-style: none;}

a{text-decoration: none;}

.clear{zoom: 1;}

.clear:after{content: '';display: block;clear: both;}

#content{

width: 800px;

margin: 0 auto;

border: 2px solid coral;

padding: 20px;

}

#content h2,.demo h3{

font-family: "微软雅黑";

line-height: 30px;

border-bottom: 2px solid coral;

color: skyblue;

margin-bottom: 10px;

}

.demo{

border: 2px solid skyblue;

padding: 10px;

margin-bottom: 30px;

}

.demo h3{

color: springgreen;margin: 0 30px;

.demo ul{

text-align: center;padding: 20px;

}

.demo li{

float: left; padding: 20px;

}

.demo a{}

.demo img{

width: 200px;height: 250px;

}

#menu{

position: fixed;

left: 50%;

margin-left: 430px;

width: 120px;

top: 100px;

}

#menu li{

width: 120px;

height: 40px;

font-size: 24px;

font-family: "微软雅黑";

margin-bottom: 10px;

float: left;

text-align: center;

}

#menu li a{

color: black;display: block;

background: wheat;

}

#menu li a:hover,

#menu li a.active

{

background: coral;

color: white;

}

</style>

<!--<script type="text/javascript" src="js/jquery-3.0.0.js" ></script>-->

<!--<script src="js/jquery-3.1.0 (1).js" type="text/javascript"></script>-->      

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>

<script>

$(document).ready(function(){

$(window).scroll(function(){

var $menu=$("#menu");

//滚动条滚动的距离

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

var demos=$('#content').find('.demo');

var currentId='';    //当前所在楼层的#id

demos.each(function(){

var iNow=$(this);

var iTop=iNow.offset().top;

if(iTop-200<scrollTop){

currentId='#'+iNow.attr('id');

}else{

return false;     //跳出当前遍历,提高效率

}

})

//给相应楼层加class

var currentLink=$menu.find('.active');

if(currentId&&currentLink.attr('href')!=currentId){

currentLink.removeClass('active');

$menu.find('[href='+currentId+']').addClass('active');

}

})

})

</script>

</head>

<body>

<ul id="menu" class="clear">

<li><a class="active" href="#demo1">阿呆</a></li>

<li><a href="#demo2">皮卡皮卡</a></li>

<li><a href="#demo3">西瓜熊</a></li>

<li><a href="#demo4">妙蛙</a></li>

<li><a href="#demo5">打靶</a></li>

</ul>

<div id="content">

<h2>樱桃丸子小铺</h2>

<div class="demo" id="demo1">

<h3>阿呆</h3>

<ul class="clear">

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

<li><a href="#"><img src="img/12.jpg"/></a></li>

</div>

<div class="demo" id="demo2">

<h3>皮卡皮卡</h3>

<ul class="clear">

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

<li><a href="#"><img src="img/96.jpg"/></a></li>

</ul>

</div>

<div class="demo" id="demo3">

<h3>西瓜熊</h3>

<ul class="clear">

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

<li><a href="#"><img src="img/35.jpg"/></a></li>

</ul>

</div>

<div class="demo" id="demo4">

<h3>妙蛙</h3>

<ul class="clear">

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

<li><a href="#"><img src="img/30.jpg"/></a></li>

</ul>

</div>

<div class="demo" id="demo5">

<h3>打靶</h3>

<ul class="clear">

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

<li><a href="#"><img src="img/24.jpg"/></a></li>

</ul>

</div>

</div>

</body>

</html>


正在回答

1 回答

具体1.x版本和3.x版本的方法哪里不同我也不太清楚··但实验结果是1.x的版本('[href='+currentId+']')可以实现

但3.x版本就要在=号后加个",]号前加个"··也就是('[href="'+currentId+'"]')

3.x需要拼成[href="item几"]

1.x需要拼成[href=item几]

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

murphy3292525 提问者

可以卡,万分感谢!
2016-08-17 回复 有任何疑惑可以回复我~
#2

唐龙

这段太重要了。我用了3.0用视频中的办法死活调不出来,一改就好了。感谢
2016-12-07 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

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