运行不出效果
哈尔波儿
2018-08-22 12:54
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无解</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 数码</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 数码 </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>
1回答
-
- 慕先生5247145
- 2018-09-05 18:24:12
系统推荐来答题，一看又是你，你代码写起来真的好粗心啊。
连class是current的css样式都没写肯定不会有效果啊。
动画效果的代码照着课程上写的，没问题，错误是把currentId写成了currented, currentLink写成了currentink.这种错误，你只要打开chrome调试工具都可以排查出来。
建议你理解了课程内容之后自己写代码，变量命名什么没必要照着教程，用自己的方式来写可能不会这么容易出错。
同是新手，共勉～
网页定位导航特效
71404 学习 · 486 问题
相似问题