JavaScript学习笔记9 JS简易导航高亮的方法

首先看下效果（link）

实现的方法韩式很简单的，主要用到了indexOf()方法来对比当前页面链接与导航中哪个链接的href有相同的部分，为相同的那个链接加上一个高亮的css。只是学习和测试，所以写的比较简陋，没有加太多的样式，方便理解。

html部分

html只是用了一个nav标签，为了方便观察把a标签写进了li中，按理说nav与li中间应该再插入一个ul标签的，但我省事没有加，但在实际应用中，加上ul标签能更多的空间来发挥css，所以建议加上。

    <nav>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Me</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="images.html">Images</a></li>
    </nav>

javascript部分

    //创建一个启动器函数
    function addLoadEvent(func){
        var oldonload = window.onload;
        if (typeof window.onload !="function") {
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }
    
    //创建一个高亮函数
    function highlight(){
        //判断浏览器是否支持getElementsByTagName和getElementById方法，不支持停止运行
        if (!document.getElementsByTagName) return false;
        if (!document.getElementById) return false; 
        
        //获取导航标签
        var nav = document.getElementsByTagName("nav");
        
        //获取第一个导航中的a标签（如果页面中有两个导航，都是nav标签的话，根据节点位置数字选择，nav[0]代表页面中第一个nav） 
        var alink = nav[0].getElementsByTagName("a");
        
        //将nav中的a标签循环取出来
        for (var i=0; i<alink.length;i++) {
        
            //创建一个新的变量
            var links;
            
            for (var i=0; i<alink.length;i++) {
            
            //循环取出a标签中href的字符串
                links=alink[i].getAttribute("href");
                
                //判断这个字符串是否与这个页面中的链接有相同的字符
                if (window.location.href.indexOf(links)!=-1) {
                
                    //将相同a标签加上一个高亮的class
                    alink[i].className="high";
                }       
            }
        }       
    }
    
    //页面加载完毕后，自动执行highlight函数
    addLoadEvent(highlight());

css部分

css部分主要是定义一下a标签的颜色和一个高亮显示的类。

    a,a:active,a:visited,a:hover{color:black;}
    .high{color: red;}