<!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>
html5中錨點的使用失去效果（用id代替以前的name），each遍歷的時候，停留在第一個（序號為0），求幫助
krui0728
2015-06-20 00:41:47