为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/网页定位导航特效

运行不出效果

<!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

关注问题 我要回答
1328
操作
收起

正在回答

1 回答

慕先生5247145 回答被采纳 +2 积分
2018-09-05

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

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

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

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

同是新手，共勉～

0 回复 有任何疑惑可以回复我~
收起回答
#1

哈尔波儿 提问者

可以冒昧的问一下你这是自学的么，有什么比较好的方法么
2018-09-06 回复 有任何疑惑可以回复我~
#2

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

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

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

现在有点瓶颈看不进去了，有啥办法呀
2018-09-06 回复 有任何疑惑可以回复我~
#4

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

看不进去，就去练习以前学过的。可以去试着模仿网站主页，从最简单的到最复杂的，百度，新浪都可以。你要强迫自己学就没什么效果，还不如去练习去。
2018-09-06 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消
网页定位导航特效
  • 参与学习       71413    人
  • 解答问题       486    个

本课程讲解网页定位导航特效，仿天猫版地狗购物网，你值得拥有

进入课程

本课相似问答

3 回答js源码效果运行不出来，关于top的值没有变化的问题。

2 回答达不到效果，求解？

3 回答木有效果+1

2 回答按照老师讲的写的，不能出现导航栏滚动效果，怎么也找不出错

1 回答为什么滚动条滚动效果没有出来
搜索更多本课相关问答

运行不出效果

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信