简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

JS DIV CSS implémente les compétences effect_javascript de liste déroulante de type formulaire

WBOY
Libérer： 2016-05-16 15:44:28
original
1013 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation CSS JS DIV d'un effet de liste déroulante de type formulaire. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

JS DIV CSS implémente un effet de liste déroulante de type formulaire. C'est un effet obtenu entièrement en utilisant la technologie CSS et combiné avec JS. Il est utilisé pour remplacer la liste déroulante traditionnelle, bien qu'à l'heure actuelle, ce code. C'est encore un peu brouillon, mais c'est utile pour embellir la liste, c'est peut-être plus pratique à l'avenir, bien plus pratique que Select.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

<!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>
Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées：
css div js 下拉列表
source：php.cn
Article précédent：implémentation js d'un exemple de menu de liste de sélection avec des compétences introduction_javascript Article suivant：Le composant easyui Droppable implémente les effets de placement
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...
Depuis 2024-04-06 19:54:23
0
1
444
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...
Depuis 2024-04-06 13:17:44
0
1
493
Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...
Depuis 2024-04-06 11:05:31
0
1
417
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！