html5中使用錨點(diǎn)失效，each 遍歷的時(shí)候停留在第一個(gè)（序號(hào)為0）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>單頁導(dǎo)航</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 = " "; ? //用來記錄當(dāng)前樓層
? ? ? ? ?
? ? ? ? ? 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 運(yùn)動(dòng)</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="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/001.png" alt="測(cè)試專用" /></a></li>
</ul>
</div>
</section>
<section>
<div id="item2" class="item">
<ul>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/002.png" alt="測(cè)試專用" /></a></li>
</ul>
</div>
</section>
<section>
<div id="item3" class="item">
<ul>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/003.png" alt="測(cè)試專用" /></a></li>
</ul>
</div>
</section>
<section>
<div id="item4" class="item">
<ul>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/004.png" alt="測(cè)試專用" /></a></li>
</ul>
</div>
</section>
<section>
<div id="item5" class="item">
<ul>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
<li><a href="#"><img src="./img/005.png" alt="測(cè)試專用" /></a></li>
</ul>
</div>
</section>
</main>
</body>
</html>
