為什么引用jquery庫(kù)時(shí)用老師的http://libs.baidu.com/jquery/1.10.2/jquery.min.js" 程序可以運(yùn)行，但是使用本地的庫(kù)src="js/jquery-3.0.0.js" 且在同一個(gè)web項(xiàng)目中，卻不能成功運(yùn)行了？
<!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");
//滾動(dòng)條滾動(dòng)的距離
var scrollTop=$(document).scrollTop();
var demos=$('#content').find('.demo');
var currentId=''; ? ?//當(dāng)前所在樓層的#id
demos.each(function(){
var iNow=$(this);
var iTop=iNow.offset().top;
if(iTop-200<scrollTop){
currentId='#'+iNow.attr('id');
}else{
return false; ? ? //跳出當(dāng)前遍歷，提高效率
}
})
//給相應(yīng)樓層加class
var currentLink=$menu.find('.active');
if(currentId&¤tLink.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>
2016-08-17
具體1.x版本和3.x版本的方法哪里不同我也不太清楚··但實(shí)驗(yàn)結(jié)果是1.x的版本('[href='+currentId+']')可以實(shí)現(xiàn)
但3.x版本就要在=號(hào)后加個(gè)"，]號(hào)前加個(gè)"··也就是('[href="'+currentId+'"]')
3.x需要拼成[href="item幾"]
1.x需要拼成[href=item幾]