js控制导航菜单点击后的css效果

Question

导航在header.php里面  每个页面都是<?php include 'inc/head.php'; ?>  是不是这种情况就实现不了我想要的效果呢？

Answer 1

<style type="text/css">
02 .no_tdn{text-decoration:none;}
03 .current{color:#FFFF00;}
04 .white{color:#fff;}
05 .fb{font-weight:bold;}
06 .ff{font-family:"黑体";}
07 .fl{float:left;display:inline;}
08 #menu{background-color:green;width:920px;height:39px;}
09 #menu li{height:29px;line-height:29px;width:102px;text-align:center;}
10 #menu li a:hover,#menu li a:active{color:#FFFF00;}
11 .front_after_login li{margin:5px 0 0 42px;}
12 </style>
01 <div id="menu" class="cl">
02    <ul class="front_after_login">
03       <li class="fl"><a href="index.jsp" class="no_tdn white fb"><span class="ff">·</span>源码首页</a></li>
04       <li class="fl"><a href="#" class="no_tdn white fb"><span class="ff">·</span>ASP源码</a></li>
05       <li class="fl"><a href="#" class="no_tdn white fb"><span class="ff">·</span>PHP源码</a></li>
06       <li class="fl"><a href="#" class="no_tdn white fb"><span class="ff">·</span>JSP源码</a></li>
07       <li class="fl"><a href="#" class="no_tdn white fb"><span class="ff">·</span>JQuery特效</a></li>
08       <li class="fl"><a href="#" class="no_tdn white fb"><span class="ff">·</span>软件下载</a></li>
09    </ul>
10  </div>jquery控制菜单高亮显示
1 $(document).ready(function(){
2     $("#menu li").click(function(){
3         $("#menu li").find("a").removeClass("current").addClass("white");//首先移除全部的current
4         var $aobj=$(this).find("a");
5         $aobj.removeClass("white").addClass("current");
6     });
7    });js控制菜单高亮显示
01 var menu=document.getElementById("menu");
02    var as=menu.getElementsByTagName("a");//得到menu所有的a标签
03    window.onload=function(){
04     for(var i=0;i<as.length;i++){
05         as[i].onclick=function(){
06             aonclick(this);
07         }
08     }
09    }
10    function aonclick(obj){
11     for(var j=0;j<as.length;j++){
12         if(as[j]==obj){//点击的是当前的a标签
13             as[j].className="no_tdn current fb";
14         }else{
15             as[j].className="no_tdn white fb";
16             }
17         }
18     }前两种方法在页面刷新的情况下高亮消失，在引用的时候有限制，推荐一种防刷新导航菜单的方法：
01 window.onload=function menuFix(){
02 var strUrl,strHref;
03 var Navs=document.getElementById("menu").getElementsByTagName("a");
04 // 如果链接没有参数，或者URL链接中不存在我们要获取的参数，则返回数组中的序号
05     strUrl=location.href.substring(location.href.lastIndexOf("/")+1);//取得URL页面名称
06     for (var i = 0; i < Navs.length; i++) {
07        strHref=Navs[i].getAttribute("href").substring(Navs[i].getAttribute("href").lastIndexOf('/')+1);
08        //在IE6,IE7中strHref获得的是全路径，而在IE8和ff中获得的是页面名称，为了兼容，需要将它的字符串进行拆分/
09        if(strUrl==strHref){//高亮当前菜单
10          Navs[i].className = "no_tdn current fb";
11         }else{
12          Navs[i].className = "no_tdn white fb";
13         }
14     }
15 }