jQuery+css 實現導航當前頁高亮

來源:互聯網
上載者:User
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: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: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>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.