问答详情
源自:4-2 使用jQuery实现网页定位导航(中)

添加类名出错

<script>
$(document).ready(function(e) {
	$(window).scroll(function(e) {
		var top=$(document).scrollTop();
		//console.log(top);
		var menu=$('#menu');
		var pic=$('#pic').find('.mem');
		var currentId="";
		pic.each(function(index, element) {
			var ths=$(this);
			var picTop=ths.offset().top;
			//console.log(picTop);
			if (top>picTop-300){
				currentId="#"+ths.attr("id");
			}
			else {return false;}
		});
		
		var currentLink=menu.find(".first");
		if (currentId&&currentLink.attr("href")!=currentId){
			
			currentLink.removeClass("first");
			menu.find("[href="+currentId+"]").addClass("first");
			
		}
		
		
	});
});

</script>


<body>

<div id="menu">
		<ul>
				<li><a href="#pic1" class="first">新加坡</a></li>
				<li><a href="#pic2">马来西亚</a></li>
				<li><a href="#pic3">三亚</a></li>
				<li><a href="#pic4">泰国</a></li>
				<li><a href="#pic5">台湾</a></li>
		</ul>
</div>


<div id="pic">
	<h2>遥祝安好</h2>
	<div id="pic1" class="mem">
	
		<h4>新加坡</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t0165425a5c9db4e230.jpg" /></a></li>
		</ul>
		
	</div>
	<div id="pic2" class="mem">
		<h4>马来西亚</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery1.jpg" /></a></li>
		</ul>
	</div>
	<div id="pic3" class="mem">
		<h4>三亚</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01c1b4fa6a4fe8ea57.jpg" /></a></li>
		</ul>
	</div>
	<div id="pic4" class="mem">
		<h4>泰国</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/t01a0df86b676757198.jpg"/></a></li>
		</ul>
	</div>
	<div id="pic5" class="mem">
		<h4>台湾</h4>
		<br />

		<ul>
		<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	<li><a href="#"><img src="file:///D|/HTML文件/未命名站点 2/scenery2.jpg"/></a></li>
	</ul>
	</div>
</div>
		
			
	
	
	
	
	
</body>

控制台报错:不能识别href

http://img.mukewang.com/590d82180001cb4708000191.jpg

提问者:慕用9244143 2017-05-06 15:58

个回答

  • 广工小成
    2017-05-06 21:44:37
    已采纳

    注意:不知道是不是jquery版本的问题,老师演示是正确的,但是新版的库有问题。menu.find("[href="+currentId + "]")此处中变量为字符串拼接时,应当为menu.find("[href='"+currentId+"']" ),"+currentId+"为变量拼接,单引号将变量转换为字符串