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

上次在这里有个童鞋介绍了一个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也判断了？

解决方案 »

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

  2.   

    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(){});
      

  3.   

    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>
      

  4.   

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

  5.   

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

  6.   

    <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>
    这样写对不，但是这样写的话，还是会有那个错误
      

  7.   

    我觉得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>
      

  8.   

    把alert(thisURL)注释掉啊，你真懒，呵呵
     var thisURL = location.search.toLowerCase();        ////   alert(thisURL)