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


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>



相关阅读:
DBA应该知道的一些关于SQL Server跟踪标记的使用
js获取本机操作系统类型的两种方法
HTML5 Canvas实现文本对齐的方法总结
Jersey框架的统一异常处理机制分析
win10隐藏图标后找不到怎么办?win10隐藏图标后如何找出来
Win10正式版10586.104更新了什么?Win10正式版10586.104更新内容汇总(不断更新中)
全面了解MySql中的事务
win10不是完全免费 仅限Win7/8.1用户第一年内免费升级
PHP中的替代语法简介
Windows系统怎么添加Ubuntu启动项?
php调用nginx的mod_zip模块打包ZIP文件
做好七件事帮你提升jQuery的性能
jQuery使用$.ajax进行即时验证的方法
Android编程中自定义dialog用法实例
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4