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

这篇文章主要介绍了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>
<div >
<form>
<input type="text" readonly="readonly"/>
<input type="submit" value="查询"/>
</form>
</div>
<div>
<ul >
<li><input type="checkbox" value=1 />1</li>
<li><input type="checkbox" value=2 />2</li>
<li><input type="checkbox" value=3 />3</li>
</ul>
</div>
</div>

您可能感兴趣的文章:

相关文章

最新评论

站长推荐

正版 Windows 10

正版Windows 10 家庭/专业版，操作系统限时抢购[￥1088→￥248]

站长推荐

正版 Office 软件

Microsoft Office 2016/2019/365 正版最低价仅需[ ￥148元]

大家感兴趣的内容

最近更新的内容

常用在线小工具