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

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

WBOY

リリース： 2016-06-21 09:41:23

オリジナル

1202 人が閲覧しました

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