この記事では、編集可能なバックグラウンド管理メニュー関数のJS実装について説明します。次のように、参照のために共有してください。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js editabutal background menu </cs " Li、H2 {マージン：0;パディング：0;} ul {list-style：none;}＃top {width：900px;高さ：40px;マージン：0 Auto;バックグラウンドカラー：＃cccc00} #top h2 {width：150px;高さ：40px;バックグラウンドカラー：＃99cc00;フロート：左;フォントサイズ：14px;テキストアライグ：センター; line-height：40px;}＃toptags {width：750px;高さ：40px;マージン：0 Auto;バックグラウンドカラー：＃cccc00;フロート：左} #toptags ul li {float：left;幅：100px;高さ：25px;マージン右：5px;表示：ブロック;テキストアライグ：センター;カーソル：ポインター;パディングトップ：15px;}＃main {width：900px;高さ：500px;マージン：0 Auto;バックグラウンドカラー：＃f5f7e6;}＃leftmenu {width：150px;高さ：500px;バックグラウンドカラー：＃009900; float：left} #leftmenu ul {margin：10px;}＃leftmenu ul li {width：130px;高さ：30px;表示：ブロック;背景：＃99cc00;カーソル：ポインター; Line-Height：30px;テキストアライグ：センター;マージンボトム：5px;}＃leftmenu ul li a {color：＃000000;テキストデコレーション：なし;}＃content {width：750px;高さ：500px; float：left} .content {width：740px;高さ：490px;表示：なし;パディング：5px; Overflow-y：auto; Line-Height：30px;}＃footer {width：900px;高さ：30px;マージン：0 Auto;バックグラウンドカラー：#ccc; Line-Height：30px;テキストアライグ：center;}。content1 {width：740px;高さ：490px;表示：ブロック;パディング：5px; Overflow-y：auto; line-height：30px;} </style> <script type = "text/javascript"> window.onload = function（）{return document.getelementbyid（id）} var menu = $（ "toptags"）。 ck = $（ "leftmenu"） //左側のメニューをクリックして、（i = 0; i <ck.length; i ++）{ck [i] .onclick = function（）{$（ "welcome"）。style.display = "none" // clearmenu（）を非表示にするためのwelcome（）; this.style.background = "Yellow"; //（j = 0; j <8; j ++）{if（this == ck [j]）{if（$（ "p"+j）== null）{openNew（j、this.innerhtml）; //タグを表示するテキストにタグを設定} clearstyle（）; $（ "p"+j）.style.backgroundcolor = "Yellow"; ClearContent（）; $（ "c"+j）.style.display = "block"; }} falseを返します。 }} //タグ関数を追加または削除するOpenNew（id、name）{var tagmenu = document.createelement（ "li"）; tagmenu.id = "p"+id; tagmenu.innerhtml = name+""+"<img src = 'close.gif' style = 'vertical-align：middle'/>"; //タグクリックイベントtagmenu.onclick = function（evt）{clearmenu（）; ck [id] .style.background = "yellow"; ClearStyle（）; tagmenu.style.backgroundcolor = "yellow"; ClearContent（）; $（ "c"+id）.style.display = "block"; } // tagmenu.getelementsbytagname（ "img"）[0] .onclick = function（evt）{evt =（evt）？evt：（（window.event）？window.event：null）; onclick = function（evt）{evt）{0] [0]で画像クリックイベントを閉じます。 if（evt.stoppropagation）{evt.stoppropagation（）} //オペラとサファリバブルの動作をキャンセル。 this.parentnode.parentnode.removechild（tagmenu）; //現在のタグvar color = tagmenu.style.backgroundcolorを削除します。 //タグを閉じる場合、最後のタグを閉じる場合、（color == "＃ffff00" || color == "Yellow"）{//色の違いの説明if（tags.length-1> = 0）{clearstyle（）; tags [tags.length-1] .style.backgroundcolor = "Yellow"; ClearContent（）; var cc = tags [tags.length-1] .id.split（ "p"）; $（ "c"+cc [1]）。style.display = "block"; clearmenu（）; ck [cc [1]]。style.background = "yellow"; } else {clearContent（）; clearmenu（）; $（ "welcome"）。style.display = "block"; }}} menu.appendchild（tagmenu）; } //クリアメニュースタイル関数clearmenu（）{for（i = 0; i <ck.length; i ++）{ck [i] .style.background = "＃99cc00"; }} // Clear Tagスタイル関数ClearStyle（）{for（i = 0; i <tags.length; i ++）{menu.getElementsByTagname（ "li"）[i] .style.backgroundcolor = "＃ffcc00"; }} // Clear Content関数ClearContent（）{for（i = 0; i <7; i ++）{$（ "c"+i）.style.display = "none"; }}} </script> </head> <body> <div id = "top"> <h2>管理メニュー</h2> <div id = "toptags"> <ul> </ul> </div> </div> <div = "div div =" div div " <li>ナビゲーション4 </li> <li>ナビゲーション5 </li> <li>ナビゲーション6 </li> <li>ナビゲーション7 </li> </ul> </div> <div id = "content"> <div id = "welcome" style = "display：block;"> <div align = "center"> <p> </p> div </p> </p> <div id = "c0"> <a href = "###">ナビゲーション1 </a> </div> <div id = "c1"> <a href = "###"> navigation 2 </a> </div> <div div = "c2"> <a href = "###">ナビゲーション3 href = "###">ナビゲーション4つの内容</a> </div> <div id = "c4"> <a href = "###">ナビゲーション5つの内容</a> </div> <div> div> div = "###">ナビゲーション6つの内容</a>内容</a> </div> </div> </div> <div id = "footer"> copyright vevb.com </div> </body> </html>操作レンダリングは次のとおりです。
完全なサンプルコードをダウンロードするには、ここをクリックしてください。
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptアレイ操作手法の要約」、「JavaScript数学的操作使用方法の要約」、「JavaScriptデータ構造とアルゴリズム技術の要約」、「JavaScriptスイッチのスイッチの要約」 "javascript search"、sumplay of sumplay of sumplays "、 JavaScriptアニメーション効果とテクニック "、「JavaScriptエラーとデバッグテクニックの要約」および「JavaScriptトラバーサルアルゴリズムとテクニックの概要」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。