今天遇到一个冲突的问题，关于激活页面样式的

[dean7788]

上次在这里有个童鞋介绍了一个JS给我，是关于激活页面CSS的，但目前遇到一个问题是，如果同一个页面有两个相同的连接
，但却想激活不同的样式，这样就会造成冲突

这位童鞋的JS是通过判断href判断的
以下下这个JS是想要激活<a id=index1 href="about.asp">关于我们</href>
样式为.now{background:#f00}

window.onload = function()
{
  var menuList  = document.getElementsByTagName("a");
        var url = document.location.href;
        var hrefUrl = '';
        if(menuList==null || typeof(menuList)=='undefined')
        { return;}
        var index=0;
        for(;index < menuList.length;index++)
        {
            hrefUrl = menuList[index].href;
            hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
            if(hrefUrl!='' && hrefUrl != '/')
            {
                if(url.indexOf(hrefUrl) > 0 )
                {
                    break;
                }
            }
        }
        if(index <  menuList.length)
        {
            menuList[index].className="now";
        }else{
             menuList[0].className="now"; // 没找到匹配的，设置第一个菜单
         }
}

以下这个JS是要<a id=cc1 href="about.asp">关于我们</a>
样式为.cnow{background:#000}

window.onload = function()
{
  var menuLi  = document.getElementsByTagName("a");
        var url = document.location.href;
        var hrefUrl = '';
        if(menuLi==null || typeof(menuLi)=='undefined')
        { return;}
        var cc=0;
        for(;cc < menuLi.length;cc++)
        {
            hrefUrl = menuLi[cc].href;
            hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
            if(hrefUrl!='' && hrefUrl != '/')
            {
                if(url.indexOf(hrefUrl) > 0 )
                {
                    break;
                }
            }
        }
        if(cc <  menuLi.length)
        {
            menuLi[cc].className="cnow";
        }else{
            menuLi[0].className="cnow"; // 没找到匹配的，设置第一个菜单
         }
 
}

但是当使用的时候，<a id=index1 href="about.asp">关于我们</a>却接收了CNOW的样式
而，<a id=cc1 href="about.asp">却接收不到样式


我估计是这个js是通过判断连接给CSS的，我想怎么加一段代码，把ID也判断了？

[dean7788]

[Quote=引用 3 楼 toury 的回复:]
1楼有些打错的字，看这个：

HTML code

<style>
a:link,a:visited{color:#505050; text-decoration:none;}
a:hover{color:#0072dc}
#menu{float:left; width:100px; height:18px; position:relative}
#menu ul li{float……
[/Quote]


可不可以弄URL后面不附加id?,加个ID很麻烦

[dean7788]

[Quote=引用 2 楼 hch126163 的回复:]
1、 不要用 document.getElementsByTagName("a");

应该用 document.getElementById("菜单父级对象ID").getElementsByTagName("a");
2、
window.onload = function()
{
};

这种写法，只能出现一次。否则后面的会覆盖前面的！

可以把2段代码放到一个window……
[/Quote]
绑定事件怎么用法？
第二种方法能帮我写个例子吗？

[hch126163]

function fun1(){

}
function fun2(){

}
...
function funN(){

}
window.onload = function()
{
fun1();
fun2();
...
funN();
};

[dean7788]

<script type="text/javascript">
function fun2(){
	 var menuLi  = document.getElementsByTagName("a");
        var url = document.location.href;
        var hrefUrl = '';
        if(menuLi==null || typeof(menuLi)=='undefined')
        { return;}
        var cc=0;
        for(;cc < menuLi.length;cc++)
        {
            hrefUrl = menuLi[cc].href;
            hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
            if(hrefUrl!='' && hrefUrl != '/')
            {
                if(url.indexOf(hrefUrl) > 0 )
                {
                    break;
                }
            }
        }
        if(cc <  menuLi.length)
        {
            menuLi[cc].className="cnow";
        }else{
            menuLi[0].className="cnow"; // 没找到匹配的，设置第一个菜单
         }
	
	}
window.onload = function()
{
fun2();
 
}
</script>

<script type="text/javascript">
function fun1(){
	 var menuList  = document.getElementsByTagName("a");
        var url = document.location.href;
        var hrefUrl = '';
        if(menuList==null || typeof(menuList)=='undefined')
        { return;}
        var index=0;
        for(;index < menuList.length;index++)
        {
            hrefUrl = menuList[index].href;
            hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
            if(hrefUrl!='' && hrefUrl != '/')
            {
                if(url.indexOf(hrefUrl) > 0 )
                {
                    break;
                }
            }
        }
        if(index <  menuList.length)
        {
            menuList[index].className="now";
        }else{
             menuList[0].className="now"; // 没找到匹配的，设置第一个菜单
         }
}
window.onload = function()
{
 fun1();
}
</script>

这样写对不，但是这样写的话，还是会有那个错误

[dean7788]

我把两个并在一起也不行，还是只会读取第一个

[toury]

我觉得3楼是比较简单的办法。不过既然你不愿意加参数，那就按你的意思来，网页加载后让程序帮你加，哈哈：

<style>
a:link,a:visited{color:#505050; text-decoration:none;}
a:hover{color:#0072dc}
#menu{float:left; width:100px; height:18px; position:relative}
#menu ul li{float:left; list-style:none}
#menu ul li .now{color:#F00}
#menu ul li .cnow{background:#000}

</style>
<script type="text/javascript">
function addid(o){
  var func=function(){ o.href +='?id='+o.id; }
  return func;
}

window.onload=function(){  
  var obj=document.getElementById('menu').getElementsByTagName('A')   
  for(var i=0;i<obj.length;i++){
    if(window.addEventListener){ obj[i].addEventListener('click', addid(obj[i]), false);} 
    else{obj[i].attachEvent('onclick',addid(obj[i]));}         //IE
  }
  
  var thisURL = location.search.toLowerCase();           alert(thisURL)
  if(thisURL.length==0){return}//首次打开网页不设置

  var id=thisURL.split('=')[1];
  for(var i=0;i<obj.length;i++){ obj[i].className=obj[i].id==id ? id=='cc1'? 'cnow' : 'now' : '';  }
}
</script>
<body>
<div id="menu">
     <ul>
       <li><a href="a.ASP" id="a">这个就是a.ASP</a></li>
       <li><a href="b.ASP" id="b">这个就是b.ASP</a></li>
       <li><a href="about.asp" id=cc1>关于我们</a></li>
       <li><a href="about.asp" id=index1>关于我们</a></li>
     </ul>
</div>
</body>

[dean7788]

会弹出小窗口~~

[toury]

[Quote=引用 10 楼 dean7788 的回复:]

会弹出小窗口~~
[/Quote]
把alert(thisURL)注释掉啊，你真懒，呵呵
var thisURL = location.search.toLowerCase(); //// alert(thisURL)

[dean7788]

谢了

[dean7788]

后缀名你附加了ID？

[toury]

[Quote=引用 13 楼 dean7788 的回复:]

后缀名你附加了ID？
[/Quote]
是。9楼已经说了

[dean7788]

高亮。。让程序员做算了。

[toury]

<style>
a:link,a:visited{color:#505050; text-decoration:none;}
a:hover{color:#0072dc}
#menu{float:left; width:100px; height:18px; position:relative}
#menu ul li{float:left; list-style:none}
#menu ul li .now{color:#F00}
#menu ul li .cnow{background:#000}

</style>
<script type="text/javascript">
window.onload=function(){
  var thisURL = location.search.toLowerCase();
  if(thisURL.length==0){return}//首次打开网页不设置

  var id=thisURL.split('=')[1];
  var obj=document.getElementsByName('index')  
  for(var i=0;i<obj.length;i++){
    obj[i].className=obj[i].id==id ? id=='cc1'? 'cnow' : 'now' : '';
  }
}
</script>

<body>
<div id="menu">
     <ul>
       <li><a href="a.asp?id=a" id="a" name="index">这个就是l2.htm</a></li>
       <li><a href="b.asp?id=b" id="b" name="index">这个就是b.ASP</a></li>
       <li><a href="about.aps?id=cc1" id=cc1 name="index" >关于我们</a></li>
       <li><a href="about.asp?id=index1" id=index1 name="index" >关于我们</a></li>
     </ul>
</div>
</body>

[hch126163]

1、 不要用 document.getElementsByTagName("a");

应该用 document.getElementById("菜单父级对象ID").getElementsByTagName("a");
2、
window.onload = function()
{
};

这种写法，只能出现一次。否则后面的会覆盖前面的！

可以把2段代码放到一个window.onload = function()
{
};内

也可以定义2个函数。在onload 中调用这2个函数


最好的还是用

// 绑定事件
function bindEvent(obj,evt,fun)
{
if(window.addEventListener){
obj.addEventListener(evt, function(e){ fun(e);},false);
}else{
obj.attachEvent('on'+evt,fun);
}
}


bindEvent(window,'load',function(){});

[toury]

1楼有些打错的字，看这个：

<style>
a:link,a:visited{color:#505050; text-decoration:none;}
a:hover{color:#0072dc}
#menu{float:left; width:100px; height:18px; position:relative}
#menu ul li{float:left; list-style:none}
#menu ul li .now{color:#F00}
#menu ul li .cnow{background:#000}

</style>
<script type="text/javascript">
window.onload=function(){
  var thisURL = location.search.toLowerCase();
  if(thisURL.length==0){return}//首次打开网页不设置

  var id=thisURL.split('=')[1];
  var obj=document.getElementsByName('index')  
  for(var i=0;i<obj.length;i++){
    obj[i].className=obj[i].id==id ? id=='cc1'? 'cnow' : 'now' : '';
  }
}
</script>

<body>
<div id="menu" style="width:100%; border:1px solid red">
     <ul>
       <li><a href="a.asp?id=a" id="a" name="index">这个就是a.ASP</a></li>
       <li><a href="b.asp?id=b" id="b" name="index">这个就是b.ASP</a></li>
       <li><a href="about.asp?id=cc1" id=cc1 name="index" >关于我们</a></li>
       <li><a href="about.asp?id=index1" id=index1 name="index" >关于我们</a></li>
     </ul>
</div>
</body>