如何使用js动态显示或隐藏DIV
生活随笔
收集整理的這篇文章主要介紹了
如何使用js动态显示或隐藏DIV
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在web頁面中，經常需要使用select控件來顯示div的顯示與隱藏，實現這個方法主要用到了setAttribute方法，以下為示例代碼
[html]?view plain?copy <html>?? <title>通過選擇項顯示不同的結果</title>?? <head>?? <script?type="text/JavaScript">?? function?showdiv()?? {?? ????var?doc=document;?? ????var?citytext=doc.getElementById("city").value;?? ????var?div1=doc.getElementById("div1");?? ????var?div2=doc.getElementById("div2");?? ????var?div3=doc.getElementById("div3");?? ????switch?(citytext)?? ????{?? ????????case?"廣州":???????????? ????????????div1.setAttribute("style","display");????????????? ????????????div2.setAttribute("style","display:none");?? ????????????div3.setAttribute("style","display:none");?? ????????????doc.getElementById("text1").value=citytext;?? ????????????break;?? ????????case?"南昌":?? ????????????div1.setAttribute("style","display:none");?? ????????????div2.setAttribute("style","display");?? ????????????div3.setAttribute("style","display:none");?? ????????????doc.getElementById("text2").value=citytext;?? ????????????break;?? ????????case?"沈陽":?? ????????????div1.setAttribute("style","display:none");?? ????????????div2.setAttribute("style","display:none");?? ????????????div3.setAttribute("style","display");?? ????????????doc.getElementById("text3").value=citytext;?? ????????????break;?? ????}?? }?? </script>?? </head>?? <body>?? <select?title="城市"?id="city"?onchange="showdiv()">?? <option?selected?value="廣州">廣州</option>?? <option?value="南昌">南昌</option>?? <option?value="沈陽">沈陽</option>?? </select>?? <div??id="div1"?style="display:none"??>您選擇了廣東的省會<input?type="text"?id="text1"?value=""/></div>?? <div??id="div2"?style="display:none"??>您選擇了江西的省會<input?type="text"?id="text2"?value=""/></div>?? <div??id="div3"?style="display:none"??>您選擇了遼寧的省會<input?type="text"?id="text3"?value=""/></div>?? </body>?? </html>??
總結
以上是生活随笔為你收集整理的如何使用js动态显示或隐藏DIV的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android Studio出现Fail
- 下一篇： jsp中的%@ ...%