标签式导航条问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
<style type="text/css">
        *{font-size:10pt}
        </style>
    <form id="form1" runat="server">
    <div style="height: 500px">
    <script  type="text/javascript" >
    function 
    show1(nam)
    { nam1.style.borderBottom='none';
    nam1.style.background='none';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist2.style.display='none';
    cplist3.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='none';
    cplist1.style.display='block'}
    function 
    show2(nam)
    { nam2.style.borderBottom='none';
    nam2.style.background='none';
    nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist1.style.display='none';
    cplist3.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='none';
    cplist2.style.display='block'}
    function 
    show3(nam)
    {  nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='none';
    nam3.style.backgroundColor='none';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist1.style.display='none';
    cplist2.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='none';
    cplist3.style.display='block'}
    function 
    show4(nam)
    {  nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='none';
    nam4.style.backgroundColor='none';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist1.style.display='none';
    cplist2.style.display='none';
    cplist3.style.display='none';
    cplist5.style.display='none';
    cplist4.style.display='block'}
    function 
    show5(nam)
    {  nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='none';
    nam5.style.backgroundColor='none';
    cplist1.style.display='none';
    cplist2.style.display='none';
    cplist3.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='block'}
    </script>
    
        <table width="750" height="25" border="0" cellpadding="0" cellspacing="0"  style="border:1px solid #A8CFF0; border-bottom:none">
          
          <tr>    
          <td width="20%" align="center" onmouseover="javascript:show1(this)" id="nam1">
          <p><A href="chanpin.asp?lx=1" style="color:#000000; text-decoration:none">第一个</A>
          </p>
          </td>    
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show2(this)" id="nam2">
          <A href="chanpin.asp?lx=2" style="color:#000000; text-decoration:none">第二个</A> 
          </td>
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show3(this)" id="nam3">
          <A href="chanpin.asp?lx=3" style="color:#000000; text-decoration:none">第3个</A> 
          </td>
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show4(this)" id="nam4">
          <A href="chanpin.asp?lx=4" style="color:#000000; text-decoration:none">第4个</A> 
          </td>
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show5(this)" id="nam5">
          <A href="chanpin.asp?lx=5" style="color:#000000; text-decoration:none">第5个</A> 
          </td>
      
          </tr>
          </table>
          <table width="750" height="370" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #A8CFF0; border-top:none; padding-top:10px; border-collapse:collapse">  
          <tr>    
          <td>
          <!--cplist-->
          <div id="cplist1" style="width:100%; height:370px; overflow:hidden">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">  
          <tr>     
           <td>   第一个第一个第一个第一个第一个第一个   
           </td>   
           </tr>  
            </table>
            <br />
                            
            </div>
            <div id="cplist2" style="width:100%; height:370px; overflow:hidden; display:none">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
            <tr>      
            <td>  第二个第二个第二个第二个第二个第二个第二个第二个
            </td>     
            <td valign="top">
            </td>   
            </tr>   
            </table>
            <br />
           
            </div>
            <div id="cplist3" style="width:100%; height:370px; overflow:hidden; display:none" >
          <table width="100%" border="0" cellspacing="0" cellpadding="0">  
          <tr>     
           <td> 第3个第3个第3个第3个第3个第3个   
           </td>
            <td valign="top">
            </td>   
           </tr>  
            </table>
            <br />
                            
            </div>
            <div id="cplist4" style="width:100%; height:370px; overflow:hidden; display:none">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">  
          <tr>     
           <td>   <asp:GridView ID="GridView4" runat="server">
                            </asp:GridView>第4个第4个第4个第4个第4个第4个   
           </td>
            <td valign="top">
            </td>   
           </tr>  
            </table>
            <br />
                            
            </div>
            <div id="cplist5" style="width:100%; height:370px; overflow:hidden; display:none">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">  
          <tr>     
           <td>   <asp:GridView ID="GridView5" runat="server">
                            </asp:GridView>第5个第5个第5个第一个第5个第一个   
           </td>
            <td valign="top">
            </td>   
           </tr>  
            </table>
            <br />
                            
            </div>
            <!--cplist end-->
            </td>  
            </tr>
            </table>
    
    </div>
    </form>
</body>
</html>
我从网上找了个javascript的标签式导航条，本来只有第一个和第二个这两个标签，我自己在后面又加了第3个-第5个。可是只有第一个和第二个好用。也就是把鼠标挪上去，下面显示不同的内容。鼠标挪到第3个-第5个上面的时候， 底下的文字还是显示 第二个 。不太懂javascript，求高手指点，到底哪写的不对劲了。万分感谢！！

解决方案 »

  1.   


       function  show3(nam){
       nam.style.borderBottom='none';    
        nam.style.background='none';    
        cplist1.style.display='none';    
        cplist2.style.display='none';
        cplist4.style.display='none';
        cplist5.style.display='none';
        cplist3.style.display='block'}  <td onmouseover="javascript:show3(nam3)" id="nam3">
      
      

  2.   

    楼主这个问题不是你不会，而是你并没有看清楚原来的的例子。
    backgroundColor与background并不一样
    backgroundColor是指nam3的背景颜色，其属性值不应为一般没有颜色就为空不应该是none，
    background则不一样它指的是nam3的整个北京包括图片等等。
    原先的例子中为了体现出变化去掉了整个背景来保持与下面的主体一致，即nam1.style.background = 'none'.