慕课网中网页定位导航中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，这个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 ...

随机推荐

[luoguP3052] [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper（DP）
传送门输出被阉割了. 只输出最少分的组数即可. f 数组为结构体 f[S].cnt 表示集合 S 最少的分组数 f[S].v 表示集合 S 最少分组数下当前组所用的最少容量 f[S] = min(f ...
JAVA虚拟机运行时内存划分--运行时数据区域
Java虚拟机在执行java程序时会把内存划分为以下几个不同的数据区域: java虚拟机内存划分(运行时)1.线程私有的: 程序计数器(Program Counter Register):可以看作当前 ...
POJ——T3417 Network
http://poj.org/problem?id=3417 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5294 A ...
10、Java并发性和多线程-线程安全与不可变性
以下内容转自http://ifeve.com/thread-safety-and-immutability/: 当多个线程同时访问同一个资源,并且其中的一个或者多个线程对这个资源进行了写操作,才会产生 ...
eclipse的Java项目修改后要不要重启tomcat问题
tomcat服务器重新部署工程或者修改了项目的代码就必须重启tomcat吗? 答: omcat服务器重新部署工程或者修改了项目的代码就必须重启tomcat吗?有没有不重启的方法,或者其他高效点的,让服 ...
Cocos2d-X中的菜单
在Cocos2d-X实现显示菜单的方式比較特殊,首先须要使用CCMenu创建一个菜单,然后使用CCMenuItem创建一个菜单项,实际上程序中显示的菜单是使用CCMenu和CCMenuItemFont ...
golang中channels的本质详解，经典!
原文:https://www.goinggo.net/2014/02/the-nature-of-channels-in-go.html The Nature Of Channels In Go 这篇 ...
HDU 1241 Oil Deposits （DFS）
题目链接:Oil Deposits 解析:问有多少个"@"块.当中每一个块内的各个"@"至少通过八个方向之中的一个相邻. 直接从"@"的地方 ...
cts帧
RTS/CTS机制的工作原理是.发送网站在向接收网站发送数据包之前.即在DIFS之后不是马上发送数据,而是代之以发送一个请求发送RTS(Ready To Send)帧,以申请对介质的占用,当接收 ...
500万url的es 批删除
bash 循环算术计算读写文件 [root@hadoop2 ~]# sh looh.sh1234LIZ1 2 3 4 0 1 2 3 4 5 6 7 8 9 10 0games:x:12:100 ...

慕课网中网页定位导航中js相关问题总结

慕课网中网页定位导航中js相关问题总结的更多相关文章

随机推荐

热门专题