Javascript(jquery)对当前菜单栏目高亮显示

举个例子，假如您网站当前菜单结构如下：

<div class="nav">
    <ul>
        <li><a href="index.html">首 页</a></li>
        <li><a href="b.html">专家观点</a></li>
        <li><a href="c.html">课题研讨</a></li>
        <li><a href="d.html">研究报告</a></li>
    </ul>
</div>

当用户点击研究报告这个菜单的时候就进入了d.html页面，需要对菜单的“研究报告”高亮显示，让用户知道是进入这个栏目了，实现方法如下。

jquery

//除了首页外当前URL对当前栏目高亮突出显示
    $(".nav li a:not(:first)").each(function(){
        $this = $(this);
        if($this[0].href==String(window.location)){
            $this.parent().addClass("selected");
        }    
    });
//当前URL对当前栏目高亮突出显示
    $(".sidenav li a").each(function(){
        $this = $(this);
        if($this[0].href==String(window.location)){
            $this.parent().addClass("selected");
        }    
    });

原生js实现

//js 当前URL对当前栏目高亮突出显示
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
    var links = myNav[i].getAttribute("href");
    var myURL = document.location.href;
    if(myURL.indexOf(links) != -1){
        myNav[i].parentNode.className="selected";
    }
}

此文部分内容参考了：jquery/js当前URL对当前栏目高亮突出显示