鼠标点击切换背景问题

<table width="100%" height="23" border="0" cellpadding="0" cellspacing="0" style="float:left;" id="NewsTop_tit">
      <tr>
        <td class="afont88" width="76"><a href="ShowCase.asp">全部案例</a></td><td class='afont88' width='76'><a href='ShowCase.asp?cat_id=19'>中小企业</a></td><td class='afont88' width='76'><a href='ShowCase.asp?cat_id=20'>教育培训</a></td><td>&nbsp;</td>
      </tr>
    </table>
<SCRIPT>
    var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('td');  
   var len=Tags.length; 
 var flag=0;//修改默认值
    for(i=1;i<len;i++){
      Tags[i].value = i;
      Tags[i].onclick=function()
  {
  changeNav(this.value)
  }; 
     }
 
    Tags[flag].className='afont8';  
  
function changeNav(v){ 
     Tags[flag].className='afont88';     flag=v; 
     Tags[v].className='afont8';
     }
   </SCRIPT>
</td>
  </tr>
</table>
刚开始，背景是在全部案例，我点中小企业以后，中小企业的背景并没有变，请问各位高手应该怎么该啊我想实现的效果是点击哪个，哪个背景就换。

解决方案 »

  1.   

    首先你有对应的css么？其次超链接一下就过去了你看的见么？给"><a href="ShowCase.asp" target="_blank">试一试
      

  2.   

    .afont8 { color:#999999; font-size:12px; text-align:center; background:url(../images/bg11.jpg); width:76px; height:23px; text-align:center; line-height:20px;}
    .afont8 a{ color:#999999; font-size:12px; background:url(../images/bg11.jpg); width:76px; height:23px; text-align:center; line-height:20px;}对应的css，你说的那个方法不行啊~~
      

  3.   

    .afont88{ color:#999999; font-size:12px; text-align:center;}
    .afont88 a{ color:#999999; font-size:12px; text-align:center;}
      

  4.   

    设置backgroundColor就可以 或是用className
      

  5.   

    LZ.....
    应该是把onclick事件绑定到A元素上哦...
    你绑定到TD上，点击的却是A元素...所以当然没效果了啊...
      

  6.   

    BTW，LZ你要的不是不下面的效果啊？？鼠标经过时变背景？？
    不然你点击超链接时换背景，用户基本上看不出区别啊...因为点完超链接后，马上就跳到别的页面了哦(网络延迟不是很严重，或者服务器不是很繁忙的情况下)...
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
          .afont88 { color:#999999; font-size:12px; text-align:center; width:76px; height:23px; text-align:center; line-height:20px; }
          .afont88 a{ color:#999999; font-size:12px; width:76px; height:23px; text-align:center; line-height:20px; }
          .afont99 { color:#aaccee; font-size:12px; text-align:center; width:76px; height:23px; text-align:center; line-height:20px; }
          .afont99 a{ color:#aaccee; font-size:12px; width:76px; height:23px; text-align:center; line-height:20px; }
        </style>
        <title>Test</title>
        <script type="text/javascript" language="javascript">
          window.onload = function() {
            var tag = document.getElementById("NewsTop_tit").rows[0].cells;
            for(var i=0; i<tag.length; i++) {
              tag[i].onmouseover = function() {
                for(var j=0; j<tag.length; j++) {
                  if(tag[j].className === "afont99") {
                    tag[j].className = "afont88";
                    break;
                  }
                }
                this.className = "afont99";
              }
              tag[i].onmouseout = function() { this.className =  "afont88"; };
            }
          };
        </script>
      </head>
      <body>
        <table width="100%" height="23" border="0" cellpadding="0" cellspacing="0" style="float:left;" id="NewsTop_tit">
          <tr>
            <td class="afont88" width="76"><a href="ShowCase.asp">全部案例</a></td>
            <td class="afont88" width="76"><a href="ShowCase.asp?cat_id=19">中小企业</a></td>
            <td class="afont88" width="76"><a href="ShowCase.asp?cat_id=20">教育培训</a></td>
            <td>&nbsp;</td>
          </tr>
      </table>
      </body>
    </html>
      

  7.   

    我很服.你一点击,就跳转了,还变什么变啊.
    如果把链接先屏了,就变了:
    <style>
    .afont8 { color:#999999; font-size:12px; text-align:center; background:url(../images/bg11.jpg) red; width:76px; height:23px; text-align:center; line-height:20px;}
    .afont8 a{ color:#999999; font-size:12px; background:url(../images/bg11.jpg) red; width:76px; height:23px; text-align:center; line-height:20px;}
    .afont88{ color:#999999; font-size:12px; text-align:center;background:green;}
    .afont88 a{ color:#999999; font-size:12px; text-align:center;background:green;} 
     
    </style>
    <table width="100%" height="23" border="0" cellpadding="0" cellspacing="0" style="float:left;" id="NewsTop_tit">
      <tr>
      <td class="afont88" width="76"><a href="#ShowCase.asp">全部案例</a></td><td class='afont88' width='76'><a href='#ShowCase.asp?cat_id=19'>中小企业</a></td><td class='afont88' width='76'><a href='#ShowCase.asp?cat_id=20'>教育培训</a></td><td>&nbsp;</td>
      </tr>
      </table>
    <SCRIPT>
      var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('td');   
    var len=Tags.length;  
     var flag=0;//修改默认值
      for(i=1;i<len;i++){
      Tags[i].value = i;
      Tags[i].onclick=function()
    {
    changeNav(this.value)
    };  
      }
      
      Tags[flag].className='afont8';   
      
    function changeNav(v){  
      Tags[flag].className='afont88'; flag=v;  
      Tags[v].className='afont8';
      }
      </SCRIPT>
    </td>
      </tr>
    </table>
      

  8.   

    颜色是我后加的,因为没有你的图片,看不出效果.在你机器上,有图片,就可以把颜色去掉.
    这个就是这样,你目前的设置,是在本页切换到新的页面,还怎么可能再想要变颜色?
    要变颜色,就得考虑新开窗口,A的TARGET=_BLANK,或者用IFRAME之类做.反正你现在的情况,就是让人觉得不可思议.
      

  9.   


    +
    可以在新窗口中打开，设置target="_blank"
      

  10.   

    http://www.web-designers.cn/work.aspx?keys=%e9%97%a8%e6%88%b7%e7%bd%91%e7%ab%99这里有那个效果，刚找到~~