ホームページ >ウェブフロントエンド >htmlチュートリアル >この className 変換が機能しないのはなぜですか? _html/css_WEB-ITnose
この className 変換が機能しないのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:36:31941ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> .s_btn { background: url("http://s1.bdstatic.com/r/www/img/i-1.0.0.png") repeat scroll 0 0 #DDDDDD; cursor: pointer; font-size: 14px; height: 32px; width: 95px; } .s_ipt_wr { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: url("http://s1.bdstatic.com/r/www/img/i-1.0.0.png") no-repeat scroll -304px 0 transparent; border-color: #9A9A9A #CDCDCD #CDCDCD #9A9A9A; border-style: solid; border-width: 1px; display: inline-block; height: 30px; margin-right: 5px; vertical-align: top; width: 418px;}input { border: 0 none; padding: 0;}#language{ border:1px solid blue; position:relative;}#change{ position:absolute;top:24px;left:-50px;list-style:none;margin:0px;padding:0px;width:60px;border:1px solid blue;border-bottom:none;display:none;}#change.active{display:block;}#change li {border-bottom:1px solid blue;}#change li.current{background:gray;} </style> <script type="text/javascript"> <!-- window.onload=function(){ var language=document.getElementById("language"); var change=document.getElementById("change"); var on=document.getElementById("on"); var lis=document.getElementById("change").getElementsByTagName("li"); language.onclick=function(){ change.className='active'; } var i=0; for(i=0;i<lis.length;i++){ lis[i].index=i; lis[i].onmouseover=function(){ for(i=0;i<lis.length;i++){ lis[i].className=''; }; this.className='current'; } lis[i].onclick=function(){ if(this.index==2){ on.innerHTML='输入法'; }else{ on.innerHTML=this.innerHTML; } change.className=''; } }; }; //--> </script> </head> <body> <div style="text-align:center;"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"/></br/></div> <div style="text-align:center;"> <span class="s_ipt_wr"><input/></span> <input type="button" class="s_btn" value="百度一下"/> <a id="on" href="javascript:;">输入法</a><span id="language">V <ul id="change"> <li>手写</li> <li>拼音</li> <li>关闭</li> </ul> </span> </div> </body></html>
ディスカッション (解決策) への返信
className とは何ですか?クラスだけ知っています
className とは何ですか? class
className は、CSS クラスのスタイルに対応する js の属性であることは知っていますが、これに触れたことはありませんか? ? ?
LZ の意味がわかりません。コードは問題ないことがわかりました。なんという効果でしょう！
完了!これがあなたが望んでいる効果かどうかはわかりません
rree
完了しました!これがあなたが望んでいる効果かどうかはわかりません
HTML コード
29f06f7b10324deb8f11215b3ec21187
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7 新しいドキュメント 効果は正しいですが、わかりませんなぜ私のは使えないのか、、、
LZ の意味がわかりません。コードは問題ないことがわかりました。なんという効果でしょう！
入力方法を選択して変更を閉じたいです
1 時間近く作業して、ようやく理由が分かりました。でも、ありがとう。for ループの本当の核心だけは理解できました。今日。あなたの質問を見てみましょう。各 li 項目をクリックすると、li の onclick イベントが最初にトリガーされ、アクティブなクラス スタイルが削除され、次にクリックした id = language を持つスパン コンテナーの onclick が実行されます。したがって、アクティブなクラス スタイルを削除した後、言語を再度クリックして、この変更のクラス スタイルを追加すると、アクティブになるため、効果は見つかりませんでした。ポイントを教えてください。サイト内メッセージの送信方法がまだわかっていません
さあ、ベイビー
それに、span パッケージの ul は標準的な方法ではないため、span と ul を分離する必要があります。問題がある場合は、サイトにメッセージを送り、仕様に従ってください。