首先看下效果（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;}