<!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=gbk" />
<title>一款DIV+CSS+JS模拟的select下拉框丨芯晴网页特效丨CsrCode.Cn</title>
<script type="text/javascript" >
function getElement(_sId){
return document.getElementById(_sId);
}
function hide(_sId)
{
var obj = getElement(_sId);
getElement('HMF-1').style.display = getElement('HMF-1').style.display == "none" ? "" : "none";
getElement('HMF-1').style.position="absolute";
}
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">
body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.cur{cursor:pointer; display:block;color:#FF0000;width:80px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#FF0000;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: 80px;}
</style>
</head>
<body>
<br><br>点击下面按钮查看预览效果：
<form>
<tr>
<input style="width:75px" onclick="hide('am')" type="text" value="0" id="am" /><br/>
</tr>
<div id="HMF-1" style="display: none " class="bm">
<span id="a0" onclick="pick('0')" onMouseOver="bgcolor('a0')" onMouseOut="nocolor('a0')" class="cur">0</span>
<span id="a1" onclick="pick('1')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">1</span>
<span id="a2" onclick="pick('2')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">2</span>
<span id="a3" onclick="pick('3')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">3</span>
<span id="a4" onclick="pick('4')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">4</span>
<span id="a5" onclick="pick('5')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">5</span>
<span id="a6" onclick="pick('6')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">6</span>
<span id="a7" onclick="pick('7')" onMouseOver="bgcolor('a7')" onMouseOut="nocolor('a7')" class="cur">7</span>
<span id="a8" onclick="pick('8')" onMouseOver="bgcolor('a8')" onMouseOut="nocolor('a8')" class="cur">8</span>
<span id="a9" onclick="pick('9')" onMouseOver="bgcolor('a9')" onMouseOut="nocolor('a9')" class="cur">9</span>
</div>
</form>
</body>
</html>
分享到：
相关推荐
"DIV模拟select下拉框"就是一种利用JavaScript库，如jQuery，来实现这一目标的技术。它通过用CSS样式化的DIV元素替换原生的SELECT元素，从而提供更灵活的外观和交互体验。 标题中的"DIV模拟select下拉框"意味着我们...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先，`demo.html`是演示页面，它展示了如何在实际项目中应用这个插件。这个页面会包含一...
**JS模拟Select下拉框组件详解** 在网页开发中，Select元素是常用的数据选择控件，但其样式和交互方式往往不能满足设计师和开发者对于用户体验的高要求。为了解决这个问题，开发人员通常会使用JavaScript来模拟...
6. **代码实现**：在提供的文件列表中，"DIV模拟SELECT多选.html"和"模拟下拉框.html"可能是包含此功能的HTML文件，其中包含了必要的HTML结构、CSS样式和JavaScript代码。开发者可以通过查看和学习这些文件，了解...
divcss模拟select 下拉框 select 改变样式
在网页开发中，"jQuery模拟select下拉框三级城市联动代码"是一种常见的交互设计，用于实现用户在选择一级城市后，自动更新二级城市列表，接着选择二级城市后，再动态加载三级城市的联动效果。这种技术提高了用户体验...
jQuery模拟select下拉框插件就是为了克服这些局限性。它通常会用一个`<div>`或其他HTML元素来模拟下拉框，并结合JavaScript和CSS实现动态效果和定制样式。这种插件可以提供更多的定制选项，如分组、搜索、过滤、无限...
本项目名为“jquery模拟div多选checkbox下拉框”，其核心目标是使用jQuery来实现一个功能丰富的多选下拉框替代传统的HTML `<select>` 元素，通过使用`<div>`元素和复选框（checkbox）来提供更自定义化的用户体验。...
在网页设计中，"div模拟下拉框"是一种常见的技术，用于替代HTML原生的`<select>`元素，以提供更灵活的样式控制和交互体验。`<select>`标签虽然简单易用，但在某些场景下可能无法满足设计师的个性化需求，如自定义...
3. **自定义下拉内容**：创建一个动态的HTML结构来模拟下拉选项，通常包括一个容器元素（如`<div>`）和多个可选项元素（可能是`<li>`）。这些元素的样式应与页面其他部分保持一致。 4. **显示和隐藏**：使用jQuery的...
DIV模拟select框，自动生成div框
这个“原生js text文本框模拟select下拉框美化点击下拉菜单选择value赋值效果源码”就是为了解决这个问题而提供的。下面我们将详细探讨相关的JavaScript知识以及如何实现这样的功能。 1. **原生JavaScript**：此...
使用div模拟下拉框则可以自由调整外观，包括字体、颜色、边框、阴影等，并能实现更丰富的动画效果。 在Demo中，通常会有一个主div作为下拉框的容器，点击时显示或隐藏下拉选项列表。这个列表也是由div组成的，每个...
"div模拟select"是一个常见的前端技术话题，主要是为了实现自定义样式和更灵活的交互效果，因为在HTML的原生`<select>`元素中，样式控制有限，无法满足一些高级的UI设计需求。这篇博客（链接：...
在"select下拉框可编辑输入框"的设计中，CSS起到了至关重要的作用，主要体现在以下几个方面： 1. **样式定制**：通过CSS，我们可以定制下拉框的外观，如边框、背景色、字体样式等，使其与网页的整体设计风格保持...
一种常见的解决方案是使用JavaScript库（如jQuery）和自定义的HTML/CSS结构来模拟`select`下拉框，这样可以实现更丰富的自定义效果。 以下是一个简单的自定义下拉框样式的步骤： 1. **HTML结构**：创建一个包含`...
- 在使用jQuery Mobile Select Menu时，确保页面结构遵循jQuery Mobile的页面模型，即每个页面都包含在一个`<div data-role="page">`内。 - 为了性能考虑，避免在大型`<select>`元素上使用增强样式，因为这可能导致...
### Jquery模拟SELECT下拉框取值效果知识点 在Web开发中，下拉选择框（SELECT元素）是一种常见的用户交互控件，它允许用户从一系列预设选项中选择一个或多个选项。然而，原生的SELECT元素在外观和用户体验上可能受...
在Web开发中，模拟select元素的点击事件是一项常见的需求，尤其是当我们希望在不直接与页面交互的情况下改变选项值时。本文将通过实例讲解来阐述如何在使用layui框架的情况下，模拟select的点击事件。 ### 标题知识...