您当前的位置是:首页-JQuery

JQuery+CSS实现当前页(导航)

【发表于】:2011/1/22 21:35:00  已被访问:226次
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> 
采集人员:汕尾做网站
 
上下篇: JQ手动滚动插件

最新推荐信息