前端技巧-单层级导航高亮

<!-- 单层级高亮 -->
<script type="text/javascript" language="javascript">
    var nav = document.getElementById("nav");
    var links = nav.getElementsByClassName("li");
    var lilen = nav.getElementsByClassName("a");
    var currenturl = document.location.href;
    var last = 0;
    for (var i = 0; i < links.length; i++) {
        var linkurl = lilen[i].getAttribute("href");
        console.log("所有页面链接："+linkurl);
        if (currenturl.indexOf(linkurl) != -1) {
            last = i;
            console.log("匹配当前的下标"+i);
        }
    }
    console.log("当前页面链接："+currenturl);
    
    links[last].className = "on";
</script>

注意：

1.导航外层 设置 id = "nav"