日期:2014-05-16  浏览次数:20294 次

JS实现菜单更换样式
一个简单的横向菜单,没有子项,要求点击菜单项,更换样式,例如点击完“产品介绍”,更换为背景蓝色,字体白色,并且保持,直到点击其他菜单项。
HTML code

<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>



------解决方案--------------------
使用方法:
第一种:将下面的代码放入你每个菜单项的页面的底部即可
JScript code
<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>