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