如何通过判断链接方式设置当前样式

  <style>
        #head{float: left;}
        #head ul li{float: left;list-style: none;padding-left: 15px;}
        .nav{font-size: 18px;font-weight: bold;}
    </style>
    <div id="head">
        <ul>
            <li><a href="okl.html">网站首页</a></li>
            <li><a href='new.html'>关于我们</a></li>
            <li><a href='about.html'>联系我们</a></li>
        </ul>
    </div>

    <script>
        var list=document.getElementById('head').firstElementChild.children;
        var host=window.location.href;
        for(i=0;i<list.length;i++){
            var link=list[i].firstElementChild.attributes['href'].value;
            if(host.indexOf(link)>=0){
                list[i].setAttribute('class','nav')
            }
        }
    </script>