猿问

html5中锚点的使用失去效果（用id代替以前的name），each遍历的时候，停留在第一个（序号为0），求帮助

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>单页导航</title>
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
* {
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	color: #000;
}
.menu {
	width: 1050px;
	height: 40px;
	line-height: 40px;
	position: fixed;
	background-color: #ccc;
	left: 50%;
	margin-left: -525px;
	z-index: 1000;
}
.menu li{
	list-style-type: none;
	float: left;
	width: 20%;
	text-align: center;
}
.menu a {
	width: 100%;
	display: block;
}
.menu a:hover,
.menu a:current {
	width: 100%;
	display: block;
	background-color: #dedede;
	color: #f00;
}
.container {
	position: relative;
	width: 1050px;
	margin: 0 auto;
}
.container li {
	width: 350px;
	height: auto;
	float: left;
	margin-top: 50px;
	list-style-type: none;
}
.current {
	width: 100%;
	background-color: #dedede;
	color: #f00;
}
</style>
<script>
	$(function() {
		$(window).scroll(function(){
			var top = $(document).scrollTop();
			
			var menu = $("#menu");
			var items = $("main").find("section");
			var currentId = " ";   //用来记录当前楼层
          	
          	items.each(function() {
          		
          		var m = $(this);
           
          		if(top > m.offset().top){
          			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>
<body>
	<header>
		<!--right manu start -->
		<div class="menu" 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>
		<!-- right menu end -->
	</header>
	<main class="container">
		<section>
			<div id="item1" class="item">
				<ul>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/001.png" alt="测试专用" /></a></li>		
				</ul>
			</div>
		</section>
		<section>
			<div id="item2" class="item">
				<ul>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/002.png" alt="测试专用" /></a></li>
				</ul>
			</div>
		</section>
		<section>
			<div id="item3" class="item">
				<ul>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/003.png" alt="测试专用" /></a></li>
				</ul>
			</div>
		</section>
		<section>
			<div id="item4" class="item">
				<ul>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/004.png" alt="测试专用" /></a></li>
				</ul>
			</div>
		</section>
		<section>
			<div id="item5" class="item">
				<ul>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
					<li><a href="#"><img src="./img/005.png" alt="测试专用" /></a></li>
				</ul>
			</div>
		</section>
	</main>
	
	
</body>
</html>


krui0728
浏览 2461回答 1
1回答
随时随地看视频慕课网APP

相关分类

Html5
JavaScript
我要回答