JS实现菜单更换样式
一个简单的横向菜单，没有子项，要求点击菜单项，更换样式，例如点击完“产品介绍”，更换为背景蓝色，字体白色，并且保持，直到点击其他菜单项。
<style>.menu_m1 ul{list-style:none;}.menu_m1 li{float:left;width:100px;margin-left:3px;line-height:34px;}.menu_m1 a{display:block;text-align:center;height:34px;}.menu_m1 a:link{color:#FFF;text-decoration:none;}.menu_m1 a:visited{color:#FFF;text-decoration:underline;}.menu_m1 a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(../images/menu_blue2.jpg) no-repeat;}</style><div class="top_div"><div class="top_logo_big"> <div class="top_logo l"><img src="images/top_logo.jpg" alt="logo" /></div> <div class="top_kx l"></div> <div class="top_wenzi l"></div> <div class="top_kx2 l"></div> <div class="top_yw"> <div class="top_y1"> <div class="top_y2 font16b">简体 繁体 英文</div> </div> </div> </div><div class="menu_big"> <div class="menu_left l"></div> <div class="menu_m l"> <div class="menu_m1 font18b l"> <ul> <li><a href="../a.shtm">首页<a></li> <li><a href="../b.shtm">内页1</a></li> <li><a href="../c.shtm">内页2</a></li> <li><a href="../d.shtm">内页3</a></li> <li><a href="../e.shtm">内页4</a></li> <li><a href="../f.shtm">内页5</a></li> <li><a href="../g.shtm">内页6</a></li> </ul> </div> <div class="menu_m2 l"> <div class="menu_m2_search"> <div class="menu_m2_search_bg1"> <div class="menu_m2_search_bg"></div> </div> </div> <div class="menu_m2_space13"></div> </div> </div> <div class="menu_r l"></div> </div></div><script type="text/javascript">function InitMenu(){ var _menu = document.getElementById("menu").getElementsByTagName("li"); var _page =window.location.pathname; if(_page=='/'){_menu[0].className='current';return} for(i=0;i<_menu.length;i++) { if(_menu[i].getElementsByTagName("a")[0].href.indexOf(_page)!=-1){_menu[i].className='current';break;} }}InitMenu();</script>