<li class="banner1"><a href="[$WebUrl$]Default.aspx">首 页</a></li>
<li class="banner2"><a href="[$WebUrl$]pro.aspx">分类列表</a></li>
<li class="banner2"><a href="[$WebUrl$]special.aspx">特价商品</a></li>
<li class="banner2"><a href="[$WebUrl$]TeamShopping.aspx">团购商品</a></li>
<li class="banner2"><a href="[$WebUrl$]brand.aspx">品牌专卖</a></li>我现在想实现的效果是,当鼠标点了分类列表的时候,分类列表的class="banner1",其它都是class="banner2";当鼠标点了特价商品的时候,特价商品的class="banner1",其它都是class="banner2".怎么实现,谢谢

解决方案 »

  1.   

    <li id="Li1" class="banner1"> <a href="[$WebUrl$]Default.aspx" onclick="ChangeCss('Li1')">首 页 </a> </li> 
    <li id="Li2" class="banner2"> <a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表 </a> </li> 
    <li id="Li3" class="banner2"> <a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品 </a> </li> 
    <li id="Li4" class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品 </a> </li> 
    <li id="Li5" class="banner2"> <a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖 </a> </li> 
    var CurrentCheck = "Li1";function ChangeCss(id)
    {
        var d =document.getElementById(id);
        if(d != undefined)
        {
            d.className="banner1";
            document.getElementById(CurrentCheck).className ="banner2";
            CurrentCheck = id;
        }
    }
      

  2.   

    这个给a链接加上onclick事件吧
      

  3.   

    一楼,你说的是对的,但是点完后首页变回banner1。其他变回banner2………………
      

  4.   

    <li id="Li1" class="banner1"> <a href="[$WebUrl$]Default.aspx" onclick="ChangeCss('Li1')">首 页 </a> </li> 
    <li id="Li2" class="banner2"> <a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表 </a> </li> 
    <li id="Li3" class="banner2"> <a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品 </a> </li> 
    <li id="Li4" class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品 </a> </li> 
    <li id="Li5" class="banner2"> <a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖 </a> </li> 注意没,一开始加载的时候Li1是banner1。当点的时候是变了,但是点完了就又变成页面加载的时候的了………………
    也就是点Li2的时候Li2是变为banner1,但是点完了,页面一加载就变成初始的了……
      

  5.   

    不是,所有的都是这样,点完了,页面一刷新就加载回去了
    <li id="Li1" class="banner1">
    <li id="Li2" class="banner2"> 
    <li id="Li3" class="banner2"> 
    <li id="Li4" class="banner2"> 
    <li id="Li5" class="banner2"> 
      

  6.   

    比如点Li2的时候是<li id="Li2" class="banner1">,其它都是 class="banner2"。但是点完了,页面要加载,就变回去了。变成
    <li id="Li1" class="banner1"> 
    <li id="Li2" class="banner2"> 
    <li id="Li3" class="banner2"> 
    <li id="Li4" class="banner2"> 
    <li id="Li5" class="banner2"> 
      

  7.   

    .....我知道你是什么意思了.....
    晕倒,
    body onload="ChangeCss()"var myArr = new Array();
    myArr[0]="Li1";
    myArr[1]="Li2";
    myArr[2]="Li3";
    myArr[3]="Li4";
    myArr[4]="Li5";var CurrentCheck="";
    function ChangeCss()
    {
       var Url = document.location.href;
       if(Url.indexOf("Default.aspx")>=0)
       {
           CurrentCheck ="Li1";
       }
       else if(Url.indexOf("pro.aspx")>=0)
       {
          CurrentCheck ="Li2";
       }
       else if(Url.indexOf("special.aspx")>=0)
       {
          CurrentCheck ="Li3";
       }
       else if(Url.indexOf("TeamShopping.aspx")>=0)
       {
          CurrentCheck ="Li4";
       }
       else
       {
          CurrentCheck ="Li5";
       }
       
       for(var i =0; i<myArr.length;i++)
       {
          if(myArr[i] == CurrentCheck)
          {
             document.getElementById(myArr[i]).className="banner1";
          }
          else
             document.getElementById(myArr[i]).className="banner2";
          
       }
    }
      

  8.   

    额,现在变都不变了……<div id="head">
        <div id="nav">
            <script language="javascript" type="text/javascript"> 
                function myhomepage()
                { 
                    this.homepage.style.behavior='url(#default#homepage)';
                    this.homepage.sethomepage('http://www.hycs.cn'); 
                } 
        body onload="ChangeCss()" var myArr = new Array(); 
    myArr[0]="Li1"; 
    myArr[1]="Li2"; 
    myArr[2]="Li3"; 
    myArr[3]="Li4"; 
    myArr[4]="Li5"; var CurrentCheck=""; 
    function ChangeCss(id) 

      var Url = document.location.href; 
      if(Url.indexOf("Default.aspx")>=0) 
      { 
          CurrentCheck ="Li1"; 
      } 
      else if(Url.indexOf("pro.aspx")>=0) 
      { 
          CurrentCheck ="Li2"; 
      } 
      else if(Url.indexOf("special.aspx")>=0) 
      { 
          CurrentCheck ="Li3"; 
      } 
      else if(Url.indexOf("TeamShopping.aspx")>=0) 
      { 
          CurrentCheck ="Li4"; 
      } 
      else 
      { 
          CurrentCheck ="Li5"; 
      } 
      
      for(var i =0; i <myArr.length;i++) 
      { 
          if(myArr[i] == CurrentCheck) 
          { 
            document.getElementById(myArr[i]).className="banner1"; 
          } 
          else 
            document.getElementById(myArr[i]).className="banner2"; 
          
      } 
    }
            </script>
    <ul class="nav1">
    <ul class="nav01">
    <li class="nav1-1"><img src="[$WebUrl$]images/index_top1.jpg" alt="" /> </li>
    <li class="nav1-2"><span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hycs.cn');" style="cursor: hand">设为首页</span></li>
    <li class="nav1-3"><img src="[$WebUrl$]images/index_top2.jpg" alt="" /></li>
    <li class="nav1-2"><span style="cursor: hand" onclick="window.external.addFavorite('http://www.hycs.cn','红艳集团')" title="红艳集团">加入收藏</span></li>
    </ul>
    <ul class="nav02">
    <li class="nav1-5">
        <span style="float:left; margin:10px 0 0 0 ">{#MemberStateInfo#}</span>&nbsp;&nbsp;
        <img src="[$WebUrl$]images/index_top3.jpg" alt="" /> 
        <a href="[$WebUrl$]shoppingCart.aspx">购物车</a> | 
        <a href="[$WebUrl$]leaveWord.aspx">留言</a>| 
        <a href="[$WebUrl$]Turnson/Turnson1.aspx">我的圈子</a> | 
        <a href="[$WebUrl$]outStock.aspx">缺货登记</a> | 
        <a href="[$WebUrl$]helps/Index.aspx">帮助</a>
    </li>
    </ul>
    </ul>
    <ul class="logo">
    <li class="logo1">
        <a href="[$WebUrl$]Default.aspx"><img border="0" src="[$WebUrl$]images/logo.jpg" style="width:226px; height:55px" alt="" /></a>
    </li>
    <!--<li id="index_qiehuan"><font size="+1"><strong>[$MyCity$]</strong></font><br><a href=# onclick="openWithIframe('选择城市','/Controls/Area.aspx',550,420);" class="black">切换城市</a></li>-->
    <li class="logo2">
        <a href="[$WebUrl$]MemberCenter/index.aspx"><img src="[$WebUrl$]images/head_img2.jpg" border="0" alt="" /></a>&nbsp;
        <a href="[$WebUrl$]PointCard.aspx?ID=0"><img src="[$WebUrl$]images/Orders.jpg" border="0" alt="" /></a>&nbsp;
        <a href="[$WebUrl$]Auction.aspx"><img src="[$WebUrl$]images/Auction.jpg" border="0" alt="" /></a>&nbsp;
        <a href="[$WebUrl$]shopall.aspx"><img src="[$WebUrl$]images/Shop.jpg" border="0" alt="" /></a>&nbsp;
        <a href="[$WebUrl$]comment.aspx"><img src="[$WebUrl$]images/Appraise.jpg" border="0" alt="" /></a>&nbsp;
        <a href="[$WebUrl$]news/Index.aspx"><img src="[$WebUrl$]images/head_img3.jpg" border="0" alt="" /></a>&nbsp;
        <a href="[$WebUrl$]bbs/"><img src="[$WebUrl$]images/head_img4.jpg" border="0" alt="" /></a>
    </li>
    </ul>
    <ul class="banner">
    <ul class="banner0">
    <ul class="bb_01">
    <li id="bb">&nbsp;</li>
    <li id="Li1" class="banner1"><a href="[$WebUrl$]Default.aspx" onclick="ChangeCss('Li1')">首 页</a></li>
                        <li id="Li2" class="banner2"><a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表</a></li>
                        <li id="Li3" class="banner2"><a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品</a></li>
                        <li id="Li4" class="banner2"><a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品</a></li>
                        <li id="Li5" class="banner2"><a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖</a></li>
    </ul>
    <!--<ul class="bb_02">
    <li class="banner3"><a href="[$WebUrl$]class.aspx?ID=76">时尚数码</a></li>
                        <li class="banner4"><a href="[$WebUrl$]class.aspx?ID=52">手 机</a></li>
                        <li class="banner4"><a href="[$WebUrl$]class.aspx?ID=41">电脑商品</a></li>
                        <li class="banner4"><a href="[$WebUrl$]class.aspx?ID=79">耗 材</a></li>
                        <li class="banner4"><a href="[$WebUrl$]class.aspx?ID=80">MP3</a></li>
                        <li class="banner4"><a href="[$WebUrl$]class.aspx?ID=61">数码商品</a></li>
    </ul>-->
    </ul>
    <div id="headnav2">
    <ul class="banner0-0">
        <form action="[$WebUrl$]search.aspx" id="searchForm" name="searchForm">
            <li><img src="[$WebUrl$]images/search_img1.jpg" alt="" /></li>
        <li class="banner5">商品搜索:</li>
        <li class="banner7"><input type="text" name="ProKeyword" class="indexSearchKeyWord" /></li>
        <li class="banner6">{#YXShop_ClassForSearch*1#}</li>
        <li class="banner8"><input type="image" src="[$WebUrl$]images/search_img2.jpg" border="0" /></li>
        <li class="banner9"><a href="[$WebUrl$]searchPro.aspx">高级搜索</a></li>
        <li class="banner6"><script type="text/javascript" src="/JS/Substation.js"></script>&nbsp;</li>
        <li class="banner10"> </li>
            </form>
    </ul>
    <!--<ul class="banner0-1">
    <li><img src="[$WebUrl$]images/search_img3.jpg" alt="" /></li>
    <li class="banner0-1-1">诚信交易 安全支付</li>
    </ul>-->
    </div>
    </ul>
    </div>
    </div>
      

  9.   


    <li  class="banner1"> <a name='tag' href="[$WebUrl$]Default.aspx" onclick="ChangeCss(this)">首 页 </a> </li> 
    <li  class="banner2"> <a name='tag' href="[$WebUrl$]pro.aspx" onclick="ChangeCss(this)">分类列表 </a> </li> 
    <li  class="banner2"> <a name='tag' href="[$WebUrl$]special.aspx" onclick="ChangeCss(this)">特价商品 </a> </li> 
    <li  class="banner2"> <a name='tag' href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss(this)">团购商品 </a> </li> 
    <li  class="banner2"> <a name='tag' href="[$WebUrl$]brand.aspx" onclick="ChangeCss(this)">品牌专卖 </a> </li> function ChangeCss(obj) 

        var d =document.getElementsByName("tag"); 
        for(var i =0;i<d.length;i++)
        { 
            d[i].parentElement.className="banner2"; 
        } 
        obj.parentElement.className = 'banner1';
    }
      

  10.   

    ....
    你需要在body的onload绑定到ChangeCss()

    是在<body onload= "ChangeCss()">
    把ChanageCss函数
    写在head中
    <head>
    <script>
    function ChangeCss()
    {
     ....
    }
    </script>
    </head>
      

  11.   

    汗,我改了,还是不行,而且现在不是我鼠标点的那一个栏目在变。是这样的,是一个主页加载一段代码,主页的HTML代码只有一点:
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body onload= "ChangeCss()"> 
        <form id="form1" runat="server">
            <div align="center"></div>
        </form>
    </body>
    </html>
    后台调用方法把主页的HTML代码写到数据库:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>[$WebTitle$]-首页</title>
        <link href="[$WebUrl$][$WebSkins$]/YXShop_Main.css" rel="stylesheet" type="text/css" /> 
        <link href="[$WebUrl$][$WebSkins$]/YXShop_Head.css" rel="stylesheet" type="text/css" />
        <script src="[$WebUrl$]configuration/js/Prototype.js" type="text/jscript"></script>
        <script src="[$WebUrl$]configuration/js/public.js" type="text/jscript"></script>
        <script type="text/javascript" language="javascript">
            function Orders(OrderId)
            {
                if(OrderId=="")
                {
                    alert("请输入订单号!");
                    return false;
                }
                SendAjax("ConMain",OrderId);
            }
            function SendAjax(op,OrderId)
            {
                var param = "Option="+ op +"&OrderId="+ OrderId;
                var options={
                    method:'post',
                    parameters:param,
                    onComplete:
                    function(transport)
                {
                    var retv=transport.responseText;
                document.getElementById("ShowOrders").innerHTML=retv;
            }
            }
            new  Ajax.Request('Default.aspx',options);
            }
        </script>
    </head>
    <body>
        {@YX_Header}
        ……………………
    ……………………
    ……………………
    </body>
    </html>
    我要改的地方就是{@YX_Header},很多页面调用这个头文件:
    <div id="head"> 
        <div id="nav"> 
            <script language="javascript" type="text/javascript"> 
                function myhomepage() 
                { 
                    this.homepage.style.behavior='url(#default#homepage)'; 
                    this.homepage.sethomepage('http://www.hycs.cn'); 
                }
                var myArr = new Array(); 
                myArr[0]="Li1"; 
                myArr[1]="Li2"; 
                myArr[2]="Li3"; 
                myArr[3]="Li4"; 
                myArr[4]="Li5"; 
                var CurrentCheck=""; 
                function ChangeCss() 
                { 
                    var Url = document.location.href; 
                    if(Url.indexOf("Default.aspx")>=0) 
                    { 
                        CurrentCheck ="Li1"; 
                    } 
                    else if(Url.indexOf("pro.aspx")>=0) 
                    { 
                        CurrentCheck ="Li2"; 
                    } 
                    else if(Url.indexOf("special.aspx")>=0) 
                    { 
                        CurrentCheck ="Li3"; 
                    } 
                    else if(Url.indexOf("TeamShopping.aspx")>=0) 
                    { 
                        CurrentCheck ="Li4"; 
                    } 
                    else 
                    { 
                        CurrentCheck ="Li5"; 
                    }               
                    for(var i =0; i <myArr.length;i++) 
                    { 
                        if(myArr[i] == CurrentCheck) 
                        { 
                            document.getElementById(myArr[i]).className="banner1"; 
                        } 
                        else 
                            document.getElementById(myArr[i]).className="banner2";                   
                    } 
                } 
            </script> 
            <ul class="nav1"> 
                <ul class="nav01"> 
                                </ul> 
                <ul class="nav02"> 
                                </ul> 
            </ul> 
            <ul class="logo"> 
                                               </ul> 
            <ul class="banner"> 
                <ul class="banner0"> 
                    <ul class="bb_01"> 
                        <li id="bb">&nbsp; </li> 
                        <li id="Li1" class="banner1"> <a href="[$WebUrl$]Default.aspx" onclick="ChangeCss ('Li1')">首 页 </a> </li> 
                        <li id="Li2" class="banner2"> <a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表 </a> </li> 
                        <li id="Li3" class="banner2"> <a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品 </a> </li> 
                        <li id="Li4" class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品 </a> </li> 
                        <li id="Li5" class="banner2"> <a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖 </a> </li> 
                    </ul> 
                </ul> 
                <div id="headnav2"> 
                    <ul class="banner0-0">                 </ul> 
                </div> 
            </ul> 
        </div> 
    </div>
      

  12.   

    唉.你适当的调试一下....
    不可能给你一段代码,就直接能用的
    你看一下,有没有提示什么错误...
    比如找不到ChangeCss函数啊
    你看一下Url这个变量的值是什么?
    然后和程序比对着看看,哪里出问题了..
      

  13.   

    修改了下,开始不知道还要刻意刷新代码:window.onload=function()
    {
      var tag = document.cookie.split(';')[0];
      ChangeCss(null,tag) ;
      
    }function ChangeCss(obj,changTag) 

        var d =document.getElementsByName("tag"); 
        var tag = 0
        for(var i =0;i<d.length;i++)
        { 
            if(d[i] == obj) tag = i;
            d[i].parentElement.className="banner2"; 
        } 
        if(obj != null)
        obj.parentElement.className = 'banner1';
       else
         d[changTag].parentElement.className = 'banner1';
    document.cookie = tag ;
    }
    </script>
    <input onclick="a()" style="cursor:pointer;" value = "click here">
    <li  class="banner1"> <a  name='tag' href="#" onclick="ChangeCss(this)">首 页 </a> </li> 
    <li  class="banner2"> <a  name='tag' href="#" onclick="ChangeCss(this)">分类列表 </a> </li> 
    <li  class="banner2"> <a  name='tag' href="#" onclick="ChangeCss(this)">特价商品 </a> </li> 
    <li  class="banner2"> <a  name='tag' href="#" onclick="ChangeCss(this)">团购商品 </a> </li> 
    <li  class="banner2"> <a  name='tag' href="#" onclick="ChangeCss(this)">品牌专卖 </a> </li> 
      

  14.   

    修改
    window.onload=function()
    {
      var tag = document.cookie.split(';')[0];
      ChangeCss(null,tag) ;
      document.cookie = tag };
    }
      

  15.   

     肯定要修改了啊 
      1:  a 标签的 href 改为你的 url
      2:  在跳转的叶面中想办法引入 那两个函数
     搞定?
      

  16.   

    还没,点分类列表是出现http://192.168.0.117:808/=http://192.168.0.117:808/pro.aspx,点其它都是正常的,但是还是那个问题,一刷新页面所有的就成banner2,包括首页
      

  17.   

    <li class="banner1"> <a href="[$WebUrl$]Default.aspx">首 页 </a> </li>
    <li class="banner2"> <a href="[$WebUrl$]pro.aspx">分类列表 </a> </li>
    <li class="banner2"> <a href="[$WebUrl$]special.aspx">特价商品 </a> </li>
    <li class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx">团购商品 </a> </li>
    <li class="banner2"> <a href="[$WebUrl$]brand.aspx">品牌专卖 </a> </li> ========================
    他们在你的头部文件里?如果是,好办...
      

  18.   

    每点一次都要重新刷一次,head是个独立的模块,点一次就重新载回去了
      

  19.   

    在你头文件里如下:
    给LI加上ID
    onload=function(){
    var path=window.location.pathname;
    switch(path){
    case "首 页 ":
    document.getElementById("liId").className="*****";
    break;
    ...
    ...
    }}
      

  20.   


    没引入我写的onload函数?
     
    写了应该就可以了啊 主要是注意在每个页面加载时保存好当前选择项的 索引 就好了这个应该很好办到吧
      

  21.   

    汗,一个小问题还没搞定?lz可以考虑用隐含域字段来保存当前菜单的状态试试:
    <input type=hidden name=dqmenu id=dqmenu runat=server>你的代码太乱,看起来眼放花,没时间帮你改了...
      

  22.   

    我的head是从数据库里读出来,不是只有一个页面调用,很多页面调用,一读就从数据库里读出来,重新刷一次.
      

  23.   

    window.onload=function(){
    var url = window.location+'';
    var p = url.substr(url.lastIndexOf("/")+1).toLowerCase();
    for(var i=1;i<6;i++)
    {
    document.getElementById("Li"+i).className="banner2";
    if(document.getElementById("Li"+i).childNodes[0].href.toLowerCase().indexOf(p)!=-1)
    document.getElementById("Li"+i).className="banner1";
    }
    };