如何使用JavaScript判断当前链接与现实不同,而用不用的css ?

Question

代码:<div id="nav"> 
<ul> 
<li><a href="#" title="首页">首　页</a></li> 
<li><a href="1.htm" title="搞笑表情">搞笑表情</a></li> 
<li><a href="2.htm" title="情感表情">情感表情</a></li> 
<li><a href="3.htm" title="动物表情">动物表情</a></li> 
<li><a href="4.htm" title="人物表情">人物表情</a></li> 
</ul> 
</div>
#nav li{ display:inline;background:#42B6D2;}
#nav li a{width:150px; height:56px; margin-left:5px; color:#CCCCCC;  font-family:Arial; font-size:12px; text-decoration:none;}
#nav li a:hover{ color:#FFFFFF; background:#0000CC;}
#nav .b a{ width:150px; height:56px; margin-left:5px; color:#FF0000; background:#009966;}
要求,默认 <首页>  的li使用 .b  的css效果 当网址的更改时,判断与li标签中地址相同的,使用 .b 的css效果
高手们给出完整代码,或相同效果的完整实例, 谢谢了!

Answer 1

切换代码我前几天，刚刚写了这个内容。具体方案是使用cookie代码？
/**
 * cookie 操作类
 * @author Administrator
 */
/**
 * 设置cookie值
 * @param {Object} name 保存的cookie名称
 * @param {Object} value 保存的cookie的值
 * @param {Object} Days  此cookie保存的有效日期。单位、天
 */
function setCookie(name, value, Days){
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) +   ";expires=" +    exp.toGMTString();
}/**
 * 得到cookie值
 * @param {Object} name 代表cookie的名称
 * @return 返回是name对应的cookie的值
 */
function getCookie(name){
    var arr, reg = new RegExp("(^|)" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) 
        return unescape(arr[2]);
    else 
        return null;
}/**
 * 需要删除的cookie的值
 * 因为无法物理删除。只能设置为失效时间为当前时间的前一天
 * @param {Object} name
 */
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) {
        document.cookie = name + "=" + cval +
        ";expires=" +
        exp.toGMTString();
    }
}/*
更新栏目的状态。并且保存当前设置
*/
function show_m(id)
{
for(i=1;i<15;i++)
{
if(document.getElementById("l"+i))
{
obj=document.getElementById("l"+i);
if(obj.id==id)obj.className="nav_1";
}
}
setCookie("m_name",id,1000);
}
function init(){
var c_z=getCookie("m_name");
if(c_z)
{
show_m(c_z);
}
//else
// setCookies("m_name","",1000);
}
function onload_sub(arewrite)
{
if (document.all) {
window.attachEvent('onload', arewrite);
}
else {
window.addEventListener('load', arewrite, false);
}
}onload_sub(init);

Answer 2

<style>
#nav li{ display:inline;background:#42B6D2;}
#nav li a{width:150px; height:56px; margin-left:5px; color:#CCCCCC;  font-family:Arial; font-size:12px; text-decoration:none;}
#nav li a:hover{ color:#FFFFFF; background:#0000CC;}
#nav a.b{ width:150px; height:56px; margin-left:5px; color:#FF0000; background:#009966;}
</style>
<script type="text/javascript"> 
window.onload=function(){
var a = document.getElementById("nav").getElementsByTagName("a");
var n = location.href;
var b =false;
for(var i=0;i<a.length;i++){
  if(n.indexOf(a[i].href)!=-1){
    b =true;
    a[i].className = "b";
    break;
  }
}
if(!b) a[0].className = "b";
}
</script>
<div id="nav"> 
<ul> 
<li><a href="#" title="首页">首　页</a></li> 
<li><a href="1.htm" title="搞笑表情">搞笑表情</a></li> 
<li><a href="2.htm" title="情感表情">情感表情</a></li> 
<li><a href="3.htm" title="动物表情">动物表情</a></li> 
<li><a href="4.htm" title="人物表情">人物表情</a></li> 
</ul> 
</div>

Answer 3

测试过可以的，css改了一下，全部拷贝下来运行看看

Answer 4

alert(n) alert(a[i].href) 检查一下值，做相应的调整

Answer 5

对了,我网站上只有首页是一级,只它的都是参数的,就像这样的
www.xxxx.com/list.php?fullflag=1
这个有什么影响吗?

Answer 6

应该没影响。n也带?xx的, 比较一下就知道了

Answer 7

解决了,但是刷新后就失效了!
window.onload=function(){
    var a = document.getElementById("zyx_navl").getElementsByTagName("a");
    var n = document.URL;
    var b =false;
    for(var i=0;i<a.length;i++){
      if(n.indexOf(a[i].href)!=-1){
        b =true;
        a[i].className = "nav";
        break;
      }
    }
    if(!b) a[0].className = "nav";
}