本文執行個體講述了JS+DIV+CSS實現仿表單下拉式清單效果。分享給大家供大家參考。具體如下：
JS+DIV+CSS實現仿表單下拉式清單效果，是完全用CSS技術再配合JS實現的效果，用來代替傳統的Select下拉框，雖然目前來說，此代碼還有些粗糙，但對於美化列表的樣式來說，可能以後會更方便，要比Select方便的多。
運行效果截圖如下：
線上示範地址如下：
http://demo.jb51.net/js/2015/js-div-css-fselect-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIV+CSS+JS仿下拉表單</title><script type="text/javascript" >function $$$$$(_sId){ return document.getElementById(_sId); }function hide(_sId) {$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}function pick(v) { document.getElementById('am').value=v;hide('HMF-1')}function bgcolor(id){ document.getElementById(id).style.background="#F7FFFA"; document.getElementById(id).style.color="#000";}function nocolor(id){ document.getElementById(id).style.background=""; document.getElementById(id).style.color="#788F72";}</script><style type="text/css">*{margin:0px; padding:0px;}body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}.cur{cursor:pointer; display:block;color:#788F72;width:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}.am{border: 0px;color:#788F72;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}.bm{border: 1px #999999 solid ;width: 148px; margin-left:10px;}</style></head><body><form><input onclick="hide('HMF-1')" type="text" value="請選擇" id="am" class="am" /><div id="HMF-1" style="display: none " class="bm"> <span id="a1" onclick="pick('ASP')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">ASP</span> <span id="a2" onclick="pick('PHP')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">PHP</span> <span id="a3" onclick="pick('JSP')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">JSP</span> <span id="a4" onclick="pick('ASP.NET')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">ASP.NET</span> <span id="a5" onclick="pick('JAVA')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">JAVA</span> <span id="a6" onclick="pick('DELPHI')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">DELPHI</span></div></form></body></html>
希望本文所述對大家的javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
