高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose

html div

以下当前效果代码：

                <div id="portal-globalnav">                <style type="text/css">                td#portal-globalnav-color-off{                    background:#3d3d47;                 }                 td.portal-globalnav-color-on{                   background:#242329;                }                 </style>                <table frame=void>                <tr>                    <td id="portal-globalnav-color-off-1" ></td>                    <td id="portal-globalnav-color-off-2" ></td>                    <td id="portal-globalnav-color-off-3" ></td>                    <td id="portal-globalnav-color-off-4" ></td>                    <td id="portal-globalnav-color-off-5" ></td>                    <td id="portal-globalnav-color-off-6" ></td>                 </tr>                </table>               </div>                <div id="portal-globalnav-menu">                  <script type="text/javascript">                   function F_changeColorOn(var1){                       if(var1==1){                           var d=document.getElementById('portal-globalnav-color-off-1');                           d.style.background="#242329";                       }else if(var1==2){                            var d=document.getElementById('portal-globalnav-color-off-2');                           d.style.background="#242329";                         }else if(var1==3){                             var d=document.getElementById('portal-globalnav-color-off-3');                           d.style.background="#242329";                         }else if(var1==4){                              var d=document.getElementById('portal-globalnav-color-off-4');                           d.style.background="#242329";                       }else if(var1==5){                               var d=document.getElementById('portal-globalnav-color-off-5');                           d.style.background="#242329";                       }else if(var1==6){                           var d=document.getElementById('portal-globalnav-color-off-6');                           d.style.background="#242329";                     } else{                           var d=document.getElementById('portal-globalnav-color-off-6');                           d.style.background="#3d3d47";                       }                   }                     function F_changeColorOff(var1){                       if(var1==1){                           var d=document.getElementById('portal-globalnav-color-off-1');                           d.style.background="#3d3d47";                       }else if(var1==2){                            var d=document.getElementById('portal-globalnav-color-off-2');                           d.style.background="#3d3d47";                         }else if(var1==3){                             var d=document.getElementById('portal-globalnav-color-off-3');                           d.style.background="#3d3d47";                         }else if(var1==4){                              var d=document.getElementById('portal-globalnav-color-off-4');                           d.style.background="#3d3d47";                       }else if(var1==5){                               var d=document.getElementById('portal-globalnav-color-off-5');                           d.style.background="#3d3d47";                       }else if(var1==6){                           var d=document.getElementById('portal-globalnav-color-off-6');                           d.style.background="#3d3d47";                     }  else{                          var d=document.getElementById('portal-globalnav-color-off-6');                           d.style.background="#242329";                       }                                        }                             </script>                   <table frame=void>                    <tr>                       <td  onmouseover="F_changeColorOn(1)" onmouseout="F_changeColorOff(1)"><a href="#1"><img  src="images/ZY_QP_12.jpg"/ alt="高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose" ></a></td>                         <td onmouseover="F_changeColorOn(2)" onmouseout="F_changeColorOff(2)"><a href="#2" ><img  src="images/ZY_QP_13.gif" / alt="高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose" ></a></td>                         <td onmouseover="F_changeColorOn(3)" onmouseout="F_changeColorOff(3)"><a href="#3" ><img  src="images/ZY_QP_14.gif" / alt="高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose" ></a></td>                         <td  onmouseover="F_changeColorOn(4)" onmouseout="F_changeColorOff(4)"><a href="#4"><img  src="images/ZY_QP_15.gif" / alt="高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose" ></a></td>                         <td onmouseover="F_changeColorOn(5)" onmouseout="F_changeColorOff(5)"><a href="#5"><img  src="images/ZY_QP_16.gif" / alt="高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose" ></a></td>                         <td onmouseover="F_changeColorOn(6)" onmouseout="F_changeColorOff(6)"><a href="#6"><img  src="images/ZY_QP_17.gif" / alt="高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose" ></a></td>                    </tr>                    </table>                </div> 

目前实现了鼠标停留在图片菜单TD上，用函数F_changeColorOn改变另外一个TD的颜色值，鼠标离开F_changeColorOn将另外个TD（菜单图片上面的td）改回原来的颜色值,我现在想要实现鼠标的onclick事件调用另外个函数C，达到点击菜单后，鼠标离开或放在该菜单上，另外个TD的颜色值改变。而放在其他菜单上，和之前效果一样，一直想不通就是C函数如何实现？现在矛盾在点击菜单后离开，颜色没有了，因为离开了，执行了  F_changeColorOff。   请各位大侠指导下 ，就是很顶级菜单搞了1天，没有一点思路，是不是思路完全错了？

回复讨论(解决方案)

给你简化了一下：<style type="text/css">        td.portal-globalnav-color-off        {            background: #3d3d47;        }        td.portal-globalnav-color-on        {            background: yellow;        }    </style>    <script type="text/javascript">        window.onload=function () {        	 var arrTd = document.getElementsByTagName("td");        for (var i = 0; i < arrTd.length; i++) {        	arrTd[i].onmouseover = function() {        		this.className = "portal-globalnav-color-on";        	};        	arrTd[i].onmouseout = function() {        		this.className = "portal-globalnav-color-off";        	};//        	arrTd[i].onclick = (function(num) {//        		return function() {//        			for (var j = 0; j < arrTd.length; j++) {//        				if (num != j) {//        					arrTd[j].className = "portal-globalnav-color-on";//        				}//        			}//        		}//        	})(i);        }        	        }                   </script>

你后面的要求 没明白呀~~。
首先  对于导航来说  ，还是利用 无序列表（ul）来实现比较好。
后面click要求真没明白。

 <table frame="void">        <tr>            <td class="portal-globalnav-color-off">                <a href="#1">1</a>            </td>            <td class="portal-globalnav-color-off">                <a href="#2">2</a>            </td>            <td class="portal-globalnav-color-off">                <a href="#3">3</a>            </td>            <td class="portal-globalnav-color-off">                <a href="#4">4</a>            </td>            <td class="portal-globalnav-color-off">                <a href="#5">5</a>            </td>            <td class="portal-globalnav-color-off">                <a href="#6">6</a>            </td>        </tr>    </table>

简化到底吧  

<head runat="server">    <title>无标题页</title>    <style type="text/css">        td.portal-globalnav-color-off        {            background: #3d3d47;        }        td.portal-globalnav-color-on        {            background: yellow;        }    </style>    <script type="text/javascript">        window.onload=function () {        	 var arrTd = document.getElementsByTagName("td");        for (var i = 0; i < arrTd.length; i++) {        	arrTd[i].className = "portal-globalnav-color-off";        	arrTd[i].onmouseover = function() {        		this.className = "portal-globalnav-color-on";        	};        	arrTd[i].onmouseout = function() {        		this.className = "portal-globalnav-color-off";        	};//        	arrTd[i].onclick = (function(num) {//        		return function() {//        			for (var j = 0; j < arrTd.length; j++) {//        				if (num != j) {//        					arrTd[j].className = "portal-globalnav-color-on";//        				}//        			}//        		}//        	})(i);        }        	        }                   </script></head><body>    <table frame="void">        <tr>            <td >                <a href="#1">1</a>            </td>            <td >                <a href="#2">2</a>            </td>            <td >                <a href="#3">3</a>            </td>            <td >                <a href="#4">4</a>            </td>            <td>                <a href="#5">5</a>            </td>            <td >                <a href="#6">6</a>            </td>        </tr>    </table></body></html>

后面的童鞋 继续 ~

当你点击某个td是为她setAttribute一个自定义属性  
之后修改一下你的onmouseover 和onmouseout事件   如果元素有这个自定义属性则鼠标离开后元素不再改变颜色  没有的话改变  试试

没有看明白你的需求，貌似问题复杂化了，鼠标移入移出的效果完全可以用CSS来完成，为啥要要弄个JS呢？

声明一个全局变量，保存最后一次点击的td的一个序号。
var clickIndex = 0;
                   function F_getChangeIndex(_index){
                    clickIndex = _index;
                   }  
                   function F_changeColorOff(var1){
                       if(var1==1  && clickIndex!=1){
                           var d=document.getElementById('portal-globalnav-color-off-1');
                           d.style.background="#3d3d47";
                       }else if(var1==2  && clickIndex!=2){
                            var d=document.getElementById('portal-globalnav-color-off-2');
                           d.style.background="#3d3d47";  
                       }else if(var1==3  && clickIndex!=3){
                             var d=document.getElementById('portal-globalnav-color-off-3');
                           d.style.background="#3d3d47";  
                       }else if(var1==4  && clickIndex!=4){
                              var d=document.getElementById('portal-globalnav-color-off-4');
                           d.style.background="#3d3d47"; 
                      }else if(var1==5  && clickIndex!=5){
                               var d=document.getElementById('portal-globalnav-color-off-5');
                           d.style.background="#3d3d47"; 
                      }else if(var1==6  && clickIndex!=6){
                           var d=document.getElementById('portal-globalnav-color-off-6');
                           d.style.background="#3d3d47";
                     } 
                    
                   }