div模拟的下拉框特效
随笔- 4 文章- 0 评论- 0 ?
<style type="text/css">
body, ul, li
{
margin: 0;
padding: 0;
font-size: 13px;
}
ul, li
{
list-style: none;
}
#divselect
{
width: 186px;
margin: 80px auto;
position: relative;
z-index: 10000;
}
#divselect cite
{
width: 150px;
height: 24px;
line-height: 24px;
display: block;
color: #807a62;
cursor: pointer;
font-style: normal;
padding-left: 4px;
padding-right: 30px;
border: 3px solid #333333;
background: url(xjt.png) no-repeat right center;
}
#divselect ul
{
width: 184px;
border: 1px solid #333333;
background-color: #ffffff;
position: absolute;
z-index: 20000;
margin-top: -1px;
display: none;
}
#divselect ul li
{
height: 24px;
line-height: 24px;
}
#divselect ul li a
{
display: block;
height: 24px;
color: #333333;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
#divselect ul li a:hover
{
background-color: #CCC;
}
p
{
margin: 10px auto;
width: 920px;
}
#n
{
margin: 10px auto;
width: 920px;
border: 1px solid #CCC;
font-size: 12px;
line-height: 30px;
}
#n a
{
padding: 0 4px;
color: #333;
}
</style>
<form id="form1"action="" method="post">
<div id="divselect" class="divselect">
<cite>请选择特效分类</cite>
<ul>
<li><a href="javascript:;" selectid="1">导航菜单</a></li>
<li><a href="javascript:;" selectid="2">下拉select效果</a></li>
<li><a href="javascript:;" selectid="3">select模拟</a></li>
<li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li>
<li><a href="javascript:;" selectid="5">jquery 下拉特效</a></li>
</ul>
</div>
<br />
<div id="divselect" class="divselect1">
<cite>请选择特效分类</cite>
<ul>
<li><a href="javascript:;" selectid="6">导航</a></li>
<li><a href="javascript:;" selectid="7">下拉</a></li>
<li><a href="javascript:;" selectid="8">模拟</a></li>
<li><a href="javascript:;" selectid="9">特效</a></li>
<li><a href="javascript:;" selectid="10">下拉特效</a></li>
</ul>
</div>
<input name="" value="" id="inputselect"/> //获取的数据
</form>
<input type="button" value="get" onclick="get()" />
$(function(){
$.divselect(".divselect", "#inputselect");
$.divselect(".divselect1", "#inputselect");
}); //定义了两个下拉框
function get() {
var dd = document.getElementById("inputselect");
alert(dd.value);
} //弹出获取的数据
下载示例代码http://www.51xuediannao.com/js/jquery/divselect.html
最新文章
- 前端学PHP之文件操作
- iOS Photos.framework框架
- yum安装高版本mysql(5.5)
- php学习笔记：利用递归实现删除文件目录
- maven的安装与配置
- Cisco Router WEB管理
- Java 应用发布后，需要关注的7个性能指标
- nginx-systemtap-toolkit
- 指针和Const限定符
- js 深拷贝和浅拷贝
- mysql超时机制
- linux下nginx负载均衡搭建
- 如何正确的理解和解决 ORA-01843:not a valid month
- centos6删除mysql安装
- YSLOW（一款实用的网站性能检测工具）
- Zookeeper 在Windows下的安装过程及测试
- mysql 数据库设计
- Kotlin入门(8)空值的判断与处理
- Spring Cloud Feign Ribbon 配置
- Dropbox 在 Ubuntu 上需要认证授权的问题