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 void(0)的妙用
Oct 21 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
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反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
jQuery搜索同辈元素方法
2015/02/10 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
vue生命周期的探索
2019/04/03 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
使用Python的内建模块collections的教程
2015/04/28 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python 代码调试技巧示例代码
2020/08/11 Python
详解python datetime模块
2020/08/17 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
大专应届生个人的自我评价
2013/11/21 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
二年级学生评语大全
2014/04/23 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2014年度考核工作总结
2014/12/24 职场文书
护士年终考核评语
2014/12/31 职场文书
2015年女工委工作总结
2015/07/27 职场文书
田径运动会广播稿
2015/08/19 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技