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

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

                   }

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