ホームページ >ウェブフロントエンド >htmlチュートリアル >ハイスコアソリューション！初歩的な質問です。TD color_html/css_WEB-ITnose を変更するためにトップメニューをクリックすると、JS で問題が発生します。
ハイスコアソリューション！初歩的な質問です。TD color_html/css_WEB-ITnose を変更するためにトップメニューをクリックすると、JS で問題が発生します。
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 09:41:231273ブラウズ
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";
}
f67379367ee70c194e1734434cee3d1e
a34de1251f0d9fe1e645927f19a896e8
e8e8094b00bd60925953c2f8a36ed43a4481dcf4cb0d376bf041b61535cc56fabed85261ddf8aabcd458aaf92e0e00207c807124fd18ef919c4bfd9b86849282e63c98602f4364f5d2ef599b409bf11f9f8705c7aae0a11037ada66720ec87b1a9c819b96a70290049bec016f69ba0486d0d127f8ab0c60bce4bbc70011a0207a181bbcfdfd78323515c46a2ede3bda09dc87392fcd4c893cea5c802a8d5649cf006e88330c4dd687d0475479524cda9e87038cf5777eaa89a907294853840dd5e48a9064677e24c48f9fb34c25847a1
f16b1740fad44fb09bfe928bcc527e08
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。