手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery多项选项卡的实现思路附样式及代码
jQuery多项选项卡的实现思路附样式及代码
摘要:css样式:复制代码代码如下:@CHARSET"UTF-8";#div{margin-bottom:10px;position:relati...

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 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>

【jQuery多项选项卡的实现思路附样式及代码】相关文章:

jQuery结合ajax实现动态加载文本内容

jquery插件validation实现验证身份证号等

jquery实现动态改变div宽度和高度

jQuery插件zepto.js简单实现tab切换

JS函数实现鼠标指向图片后显示大图代码

jQuery实现div随意拖动的实例代码(通用代码)

jQuery实现的多屏图像图层切换效果实例

实现DIV圆角的JavaScript代码

jQuery实现给页面换肤的方法

jQuery+ajax实现无刷新级联菜单示例

精品推荐
分类导航