慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>地狗购物网——网页定位导航效果</title>
<style>
* {
margin: 0;
padding: 0;
} body {
font-size: 12px;
line-height: 1.7;
} li {
list-style: none;
} #content {
width: 800px;
margin: 0 auto;
padding: 20px;
} #content h1 {
color: #0088bb;
} #content .item {
padding: 20px;
margin-bottom: 20px;
border: 1px dotted #0088bb;
} #content .item h2 {
font-size: 16px;
font-weight: bold;
border-bottom: 2px solid #0088bb;
margin-bottom: 10px;
} #content .item li {
display: inline;
margin-right: 10px;
} #content .item li a img {
width: 230px;
height: 230px;
border: none;
} #menu {
position: fixed;
top: 100px;
left: 50%;
margin-left: 400px;
width: 80px;
} #menu ul li a {
display: block;
margin: 5px 0;
font-size: 14px;
font-weight: bold;
color: #333;
width: 80px;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
} #menu ul li a:hover,
#menu ul li a.current {
color: #fff;
background: #0088bb;
} /*ie6 hack*/
* html, * html body {
background-image: url(about:blank);
background-attachment: fixed;
} * html #menu {
/*position: fixed;*/
position: absolute;
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
} </style>
<script> //定义getByClassName函数，让函数实现根据class name获取对象并返回
function getByClassName(obj,cls){
var elements=obj.getElementsByTagName("*");
var result=[];
for(var i=0;i<elements.length;i++){
if(elements[i].className==cls){
result.push(elements[i]);
}
}
return result;
} // 用removeAttribute,setAttribute属性之后，这三个函数都不需要啦
function hasClass( obj, cls ){
return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
} function removeClass( obj, cls ){
if( hasClass( obj, cls )){
//remove
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
obj.className = obj.className.replace(reg, "");
}
} //定义addClaass函数，让函数实现给对象增加class
function addClass(obj,cls){
if(!hasClass( obj, cls )){
obj.className+=""+cls;
}
} window.onload = function(){ window.onscroll = function(){
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; var menus = document.getElementById("menu").getElementsByTagName("a"); var items = getByClassName(document.getElementById("content"), "item"); var currentId = ""; for ( var i=0; i< items.length; i++ ){
var _item = items[i];
var _itemTop = _item.offsetTop;
if( top > _itemTop - 200 ){
currentId = _item.id;
} else {
break;
}
} //请补充此处代码，给正确的menu下的a元素class赋值current
if(currentId){
for(var i=0;i<menus.length;i++){
var _menu=menus[i];
var _href=_menu.href.split("#");
if(_href[_href.length-1]!=currentId){
// removeClass(_menu,"current");
_menu.removeAttribute("class","current");
}
else{
// addClass(_menu,"current");
_menu.setAttribute("class","current");
} }
}
}
}
</script>
</head>
<body>
<div 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>
<div id="content">
<h1>地狗购物网</h1> <div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>
图为改进后的代码
1.js中ie8及以下浏览器不支持getElementsByClassName,
(1)JS原生代码里addClass添加类,要带空格
举例子 ：
<div class="item1 item2"> </div>
上面是一个div，这个div的样式已经有两个，所以你再添加class的时候就需要加空格后再加入新的样式。
最后得到： <div class="item1 item2 new"> </div>
(2)移除类：不能直接让 obj.className="";因为一个对象可能有很多类。要用如下空格替换要移除的正则表达式。
obj.className = obj.className.replace(reg, "");
2.var result = [ ];定义一个空数组。
3.window.onscroll = function(){}; 当窗口滚动时，那么执行以下函数。如果没有这一行，那么，窗口滚动没有触发任何的函数，相当于没用。window.scroll就是触发窗口滚动事件。
4._menu的href属性也可以直接用getAttribute('href') _menu.getAttribute('href')
js可以用 setAttribute('class','className')
慕课网中网页定位导航中js相关问题总结的更多相关文章
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
- 自己做的网页页面导航浏览JS/JQuery_版本2（优化边缘）
版本2增加了宽宽的边界,边界内鼠标也可以导航.边界对应这HTML页面的边界.目前右下角有时会导致功能失效.版本1. 这次找了个更好的例子,实践中产生这个需求的真实例子,点我Demo. 需求: 版本1: ...
- 自己做的网页页面导航浏览JS/JQuery
需求: 当页面是由一个巨大的表格构成时,浏览器自动会出现纵向和横向滚动条,这时用户浏览页面会出现很蛋疼的感受,那就是恶心的横向滚动条! 为了减缓这种蛋疼的感觉,我尝试做了这个导航器(不知道如何称呼), ...
- jquery网页定位导航特效
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
- [Jquery]网页定位导航特效
描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...
- 慕课网__CSS_网页图标制作
参考地址:http://www.flowerboys.cn/font/article/fontsArticle/how-to-turn-your-icons-into-a-web-font.html
- JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）
以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...
- Python爬虫之爬取慕课网课程评分
BS是什么? BeautifulSoup是一个基于标签的文本解析工具.可以根据标签提取想要的内容,很适合处理html和xml这类语言文本.如果你希望了解更多关于BS的介绍和用法,请看Beautiful ...
随机推荐
- IDEA建立一个可运行的struts2项目
参考博客:https://blog.csdn.net/shuai_wy/article/details/79027573 直接使用IDEA创建struts2项目,配置好tomcat后是跑不起来的 需要 ...
- [置顶]
Linux学习总结（20）——Linux 文件夹结构和作用
/bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的基点,比如用户user的主目录就是/home/us ...
- 【MangoDB分片】配置mongodb分片群集(sharding cluster)
配置mongodb分片群集(sharding cluster) Sharding cluster介绍 这是一种可以水平扩展的模式,在数据量很大时特给力,实际大规模应用一般会采用这种架构去构建monod ...
- 1874 Bellman-ford算法 队列优化过的 用于稀疏图，有负权的图
#include<stdio.h> #include<algorithm> #include<iostream> #include<queue> usi ...
- （三）用openCV在图片上绘画标记
1.在图片上画图(直线,矩形,圆形,多边形) import numpy as np import cv2 img = cv2.imread('watch.jpg',cv2.IMREAD_COLOR) ...
- docker重新打包MySQL5.7镜像
1:先下载MySQL镜像 # docker pull mysql:5.7 2:运行镜像生成容器 # docker run --name mysql -p 3306:3306 -e MYSQL\_ ...
- 非常适合新手的jq/zepto源码分析07---ajax的封装
复习下ajax吧! 1.创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest(); xmlhttp=new ActiveXObject("Microso ...
- 安装elasticsearch遇到的签名和目标被配置多次的问题
命中:6 http://ppa.launchpad.net/ondrej/php/ubuntu bionic InRelease获取:7 http://packages.elastic.co/elas ...
- 转：SQL 索引最左前缀原理
表结构和索引列 假设数据库中表是这样的: 我们只考虑一张表employees.titles: 索引是(emp_no,title,from_date) SHOW INDEX FROM employee ...
- Android从源码看ListView的重用机制
不管是android还是iOS,列表视图应该是最复杂的控件了.android中的listview从命名能够看出是个一维数组,而iOS中的tableview则是二维数组.但事实上须要注意的地方是差点儿相 ...