JS实现菜单更换样式

Question

一个简单的横向菜单，没有子项，要求点击菜单项，更换样式，例如点击完“产品介绍”，更换为背景蓝色，字体白色，并且保持，直到点击其他菜单项。<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>

Answer 1

可以参考一下下面的代码，主要思路就是当前点击的目录加上一个特定的样式，当点击其他目录是，则将该样式从该目录移除并加到被点击的新目录上。
<div class="menu_m1 font18b l">
                    <ul id="menu">
                    <li class="current"><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>
var current = $("#menu .current");
$("#menu li").click(function(){
    current.removeClass("current");
    $(this).addClass("current");
    current = $(this);
});
.current{
  background:blue;
  color:#fff;
}

Answer 2

<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 id="menu">                    <li><a href="../a.shtm">首页</a></li>  
                    <li><a href="../b.shtm">内页1</a></li>
                    <li><a href="../3.htm">内页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>

Answer 3

将那段Js植入你每个页面，即可通过当前页地址来自动变更对应的菜单的样式或者写入一个.js文件，并加载至每个子菜目中，然后每个页面<body onload="InitMenu()">
或许你站内有很多其他的页面的地址是不出现在菜单栏里的，想更加友好些的话，你可以
<script type="text/javascript">function InitMenu(default){
    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;}
    }
    _menu[default].className='current';
}
</script>然后，你的相关页面中：<body onload="InitMenu(这里设置一个菜单栏的序号)">就可以把相关的页面绑定一个默认的菜单项下

Answer 4

<script type="text/javascript">function InitMenu(def){
    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;}
    }
    _menu[def].className='current';
}
</script>
汗~~，把default改成def吧

Answer 5

<li><a href="../a.shtm">首页</a></li>  
                    <li><a href="../b.shtm">内页1</a></li>
                    <li><a href="../3.htm">内页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>你没有仔细看我的回复，你的菜单都有跳转功能，所以，你每次点击后都不在当前页面所以，我给你写的那个方法，是让你在每个页面中植入代码以后，它自己会分析你当前的页面名称与你的菜单相对比，并且设置相应的样式所以，你需要在每个页面都植入那段代码

Answer 6

使用方法：
第一种：将下面的代码放入你每个菜单项的页面的底部即可
<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>
第二种：将下面的代码放入一个.js文件中，然后在每个需要设置菜单样式的页面引入它
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;}
    }
}
如果你的页面已经有window.onload事件，那么移除下面的代码，并将其中的InitMenu();写入你自己定义的window.onload事件中即可window.onload=function(){
   InitMenu();
}

Answer 7

OK，第一种方法就解决了，非常感谢！
高手再帮我看看这个问题怎么解决：http://topic.csdn.net/u/20120909/19/c1f052c7-e3ed-4953-82ab-3503b13ed0a2.html