suchen

Heim >Web-Frontend >js-Tutorial >JS DIV CSS implementiert formularähnliche Dropdown-Listen-Effekte_Javascript-Fähigkeiten

JS DIV CSS implementiert formularähnliche Dropdown-Listen-Effekte_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:44:281084Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS DIV CSS-Implementierung eines formularähnlichen Dropdown-Listeneffekts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JS DIV CSS implementiert einen formularähnlichen Dropdown-Listeneffekt. Dieser Effekt wird vollständig mithilfe der CSS-Technologie erzielt und wird derzeit verwendet, um das herkömmliche Auswahl-Dropdown-Feld zu ersetzen Es ist immer noch etwas grob, aber es ist nützlich, um die Liste zu verschönern. In Zukunft wird es möglicherweise praktischer sein, viel praktischer als Select.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-div-css-fselect-codes/

Der spezifische Code lautet wie folgt: 

<!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" &#63; "" : "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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Implementierung eines Beispiels für ein Auswahllistenmenü mit Einführungskenntnissen in JavascriptNächster Artikel：js-Implementierung eines Beispiels für ein Auswahllistenmenü mit Einführungskenntnissen in Javascript

In Verbindung stehende Artikel

Mehr sehen