運(yùn)行不出效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)解</title>
<style type="text/css">
body,
div,
ul,
li {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微軟雅黑";
line-height: 20px;
}
#memu {
margin: 0 auto;
width: 1000px;
padding: 20px;
}
.item {
width: 1000px;
height: 1000px;
border: 5px solid #D3D3D3;
margin-bottom: 20px;
padding: 5px;
}
.item h2 {
font-size: 16px;
font-weight: bold;
border-bottom: 2px solid #CCCCCC;
margin-bottom: 10px;
}
.item li {
list-style: none;
margin-left: 5px;
padding: 5px;
display: inline;
}
#memu .item ul li img {
width: 300px;
height: 300px;
overflow: hidden;
margin-right: 10px;
}
#nav {
position: fixed;
top: 100px;
left: 50%;
margin-left: 540px;
width: 80px;
}
#nav ul {
list-style: none;
}
#nav ul li a {
display: block;
margin: 5px 0px;
font-size: 16px;
font-weight: bold;
color: #323232;
width: 80px;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
}
#nav ul li a:hover {
color: white;
background-color: #9F9F9F;
}
</style>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var top=$(document).scrollTop();
var nav=$("#nav");
var item=$("#memu").find(".item");
var currentId="";
item.each(function(){
var m=$(this);
var itemTop=m.offset().top;?
if(top>itemTop-200){
currentId="#"+m.attr("id");
}
else{
return false;
}
});
var currentLink=nav.find(".current");
if(currented&¤tLink.attr("href")!=currentId){
currentink.removeClass("current");
nav.find("[href="+currentId+"]").addClass("current");
}
});
});
</script>
</head>
<body>
<div id="nav">
<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 數(shù)碼</a>
</li>
</ul>
</div>
<div id="memu">
<div class="item" id="item1">
<h2>1F 男裝</h2>
<ul>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_01.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="item" id="item2">
<h2>2F 女裝</h2>
<ul>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_02.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="item" id="item3">
<h2>3F 彩妝</h2>
<ul>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_03.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="item" id="item4">
<h2>4F 家居</h2>
<ul>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_04.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="item" id="item5">
<h2>5F 數(shù)碼 </h2>
<ul>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/channel_05.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
2018-09-05
系統(tǒng)推薦來(lái)答題，一看又是你，你代碼寫(xiě)起來(lái)真的好粗心啊。
連class是current的css樣式都沒(méi)寫(xiě)肯定不會(huì)有效果啊。
動(dòng)畫(huà)效果的代碼照著課程上寫(xiě)的，沒(méi)問(wèn)題，錯(cuò)誤是把currentId寫(xiě)成了currented, currentLink寫(xiě)成了currentink.這種錯(cuò)誤，你只要打開(kāi)chrome調(diào)試工具都可以排查出來(lái)。
建議你理解了課程內(nèi)容之后自己寫(xiě)代碼，變量命名什么沒(méi)必要照著教程，用自己的方式來(lái)寫(xiě)可能不會(huì)這么容易出錯(cuò)。
同是新手，共勉～