Maison > Article > interface Web > 高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose
高分求解！新手问题，JS点击顶级菜单修改TD颜色遇到问题_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:41:231175parcourir
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";
}
}