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 相关文章推荐
js循环改变div颜色具体方法
Jun 25 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
详解javascript中的事件处理
Nov 06 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
详解React 条件渲染
Jul 08 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue实现简易音乐播放器
Aug 14 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
桌面中心(三)修改数据库
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python如何实现int函数的方法示例
2018/02/19 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
合作协议书格式
2014/08/19 职场文书
平遥古城导游词
2015/02/03 职场文书