为了账号安全,请及时绑定邮箱和手机立即绑定
关注
哈尔波儿

运行不出效果

<!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&&currentLink.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>


2018-08-22 源自:网页定位导航特效 4-5 680 浏览 1 回答

最佳回答

2018-09-05

系统推荐来答题,一看又是你,你代码写起来真的好粗心啊。

连class是current的css样式都没写肯定不会有效果啊。

动画效果的代码照着课程上写的,没问题,错误是把currentId写成了currented, currentLink写成了currentink.这种错误,你只要打开chrome调试工具都可以排查出来。

建议你理解了课程内容之后自己写代码,变量命名什么没必要照着教程,用自己的方式来写可能不会这么容易出错。

同是新手,共勉~

哈尔波儿 (提问者)

可以冒昧的问一下你这是自学的么,有什么比较好的方法么
#1 2018-09-06 回复

慕先生5247145 回复 哈尔波儿

嗯,自学,也没经验,跟着路径学的,反正就尽力把每个知识点搞懂,不死记硬背,保持思路清晰。你细心一点应该没啥问题吧。
#2 2018-09-06 回复

哈尔波儿 (提问者) 回复 慕先生5247145

现在有点瓶颈看不进去了,有啥办法呀
#3 2018-09-06 回复
点击展开后面1条评论

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信