jQuery多项选项卡的实现思路附样式及代码


Posted in Javascript onJune 03, 2014

css样式:

@CHARSET "UTF-8"; 
#div{ 
margin-bottom:10px; 
position:relative; 
} 
#div1{ 
width:153px; 
padding-top:0px; 
padding-left:0px; 
position:absolute; 
} 
#div1 ul{ 
margin-top:0px; 
padding-left:0px; 
background-color:#ccc; 
list-style:none; 
} 
#div1 ul li{ 
padding-left:0px; 
} 
#div1 ul li input{ 
margin-left:15px; 
} 
.close{ 
display:none; 
} 
.open{ 
display:block; 
}

jquery代码:
$(function(){ 
var position = $("#xx").position(); 
$("#div1").offset({ top:position.top+35,left:position.left+10}); 
$("#xx").click(function(){ 
$("#NG").toggleClass("open"); 
}); $("#div1 input[name=ng]").click(function(){ 
var arr = new Array(); 
$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}); 
$("#xx").val(arr.join(",")); 
}); 
});

html代码:
<div id="div"> 
<div align="center" id="div2" > 
<form id="form1"> 
<input type="text" readonly="readonly" id="xx"/> 
<input type="submit" value="查询"/> 
</form> 
</div> 
<div id="div1"> 
<ul class="close" id="NG" > 
<li><input type="checkbox" name="ng" value=1 />1</li> 
<li><input type="checkbox" name="ng" value=2 />2</li> 
<li><input type="checkbox" name="ng" value=3 />3</li> 
</ul> 
</div> 
</div>
Javascript 相关文章推荐
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
jquery动态改变form属性提交表单
Jun 03 #Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 #Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 #Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 #Javascript
jQuery学习笔记之总体架构
Jun 03 #Javascript
jquery控制select的text/value值为选中状态
Jun 03 #Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 #Javascript
You might like
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP7修改的函数
2021/03/09 PHP
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
17个Python小技巧分享
2015/01/23 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
python实现黑客字幕雨效果
2018/06/21 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python错误的处理方法
2020/06/23 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
商务英语专业自荐信
2013/10/14 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
《乡愁》教学反思
2014/02/18 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
教师研修随笔感言
2015/11/18 职场文书
Redis主从复制操作和配置详情
2022/09/23 Redis