jQuery+css 实现导航当前页高亮

css:

#pl #pl_menu{}
.plmenu_head  { height:20px; padding:10px 0 0 20px; width:180px; font-weight:bold;  background:transparent url(../image/web/lp/menu_head.gif) no-repeat scroll 0;}
.plmenu_select{ background:transparent url(../image/web/lp/menu_select.gif) no-repeat scroll 0; height:26px;line-height:26px; text-indent:30px; }
.plmenu_normal{ background:transparent url(../image/web/lp/menu_normal.gif) no-repeat scroll 0; height:26px;line-height:26px; text-indent:30px;}
.plmenu_bottom{ background:transparent url(../image/web/lp/menu_bottom.gif) no-repeat scroll 0; margin-top:-2px; }

html:

<div class="plmenu_head">关于我们</div>
<div id="aboutus_menu" class="plmenu_normal"><a class="head_link" href="Aboutus.html">关于我们</a></div>
<div id="companynews_menu" class="plmenu_normal"><a class="head_link" href="CompanyNews.html">公司新闻动态</a></div>
<div id="hr_menu" class="plmenu_normal"><a class="head_link" href="Hr.html">工作机会</a></div>
<div id="clientlist_menu" class="plmenu_normal"><a class="head_link" href="ClientList.html">我们的客户</a></div>
<div id="link_menu" class="plmenu_normal"><a class="head_link" href="Link.html">友情链接</a></div>
<div id="contact_menu" class="plmenu_normal"><a class="head_link" href="Contact.html">联系我们</a></div>
<div id="" class="plmenu_bottom"><img height="11" src="image/web/_blank.gif" alt="" /></div>

js:

<script  type="text/javascript">
window.onload=function()
{
    setMenuBackground();
}

function setMenuBackground()
{
    var url = document.URL;//取得当前页的URL
    
    if(/contact/.test(url.toLowerCase()))  //正则查找在url地址中是否有当前页
    {
        $("#contact_menu").removeClass("plmenu_normal").addClass("plmenu_select");
    }else if(/aboutus/.test(url.toLowerCase()))
    {
        $("#aboutus_menu").removeClass("plmenu_normal").addClass("plmenu_select");
    }else if(/link/.test(url.toLowerCase()))
    {
        $("#link_menu").removeClass("plmenu_normal").addClass("plmenu_select");
    }else if(/clientlist/.test(url.toLowerCase()))
    {
        $("#clientlist_menu").removeClass("plmenu_normal").addClass("plmenu_select");
    }else if(/hr/.test(url.toLowerCase()))
    {
        $("#hr_menu").removeClass("plmenu_normal").addClass("plmenu_select");
    }else if(/companynews/.test(url.toLowerCase()))
    {
        $("#companynews_menu").removeClass("plmenu_normal").addClass("plmenu_select");
    }
}
</script>