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>

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。