ハイスコ​​アソリューション！初歩的な質問です。TD color_html/css_WEB-ITnose を変更するためにトップメニューをクリックすると、JS で問題が発生します。

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"/></a></td>                         <td onmouseover="F_changeColorOn(2)" onmouseout="F_changeColorOff(2)"><a href="#2" ><img src="images/ZY_QP_13.gif" /></a></td>                         <td onmouseover="F_changeColorOn(3)" onmouseout="F_changeColorOff(3)"><a href="#3" ><img src="images/ZY_QP_14.gif" /></a></td>                         <td  onmouseover="F_changeColorOn(4)" onmouseout="F_changeColorOff(4)"><a href="#4"><img src="images/ZY_QP_15.gif" /></a></td>                         <td onmouseover="F_changeColorOn(5)" onmouseout="F_changeColorOff(5)"><a href="#5"><img src="images/ZY_QP_16.gif" /></a></td>                         <td onmouseover="F_changeColorOn(6)" onmouseout="F_changeColorOff(6)"><a href="#6"><img src="images/ZY_QP_17.gif" /></a></td>                    </tr>                    </table>                </div> 

現在、マウスがピクチャ メニュー TD 上に留まるように実装されており、マウスが離れたときに別の TD のカラー値を変更するために関数 F_changeColorOn が使用されます。 F_changeColorOn、他の TD (メニュー画像の td が変更されます) ) を元の色の値に戻します。今度は、マウスの onclick イベントを実装して、別の関数 C を呼び出します。メニューがクリックされた後、マウスがクリックされます。メニューを離れるかメニューに配置すると、別の TD のカラー値が変更されます。他のメニューに配置した場合、効果は以前と同じになります。C 関数の実装方法がわかりません。メニューをクリックすると矛盾が発生し、色が消えます。これは、終了後に F_changeColorOff が実行されるためです。アドバイスをください。何もアイデアを持たずにトップメニューに取り組んでいます。その考えは完全に間違っていますか？

ディスカッションへの返信（解決策）

给你简化了一下：<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) を使用することをお勧めします。
後でクリックする要件がよくわかりません。

 <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 イベントを変更します 要素にこのカスタム属性がある場合マウスが離れた後、要素の色は変更されなくなります。 そうでない場合は、変更してみてください。 問題が複雑になっているようです。なぜ JS を使用する必要があるのでしょうか?

最後にクリックされた TD のシリアル番号を保存するグローバル変数を宣言します。 var clickindex = 0; clickindex = _index; =document.getElementById('portal -globalnav-color-off-2');
var d=document.getElementById('portal-globalnav-color-off-3')
var d=document.getElementById('portal -globalnav -color-off-4');
d.style.background="#3d3d47"; var d=document.getElementById('portal-globalnav-color-off-5')
var d=ドキュメント。 getElementById('portal-globalnav-color -OFF-6 ');
d.style.background = "#3d3d47";                    
}

  

  
  
  
  
  
  
  

<<

<<

<<

<<

<<