jQuery多项选项卡的实现思路附样式及代码_Javascript教程-查字典教程网
jQuery多项选项卡的实现思路附样式及代码
jQuery多项选项卡的实现思路附样式及代码
发布时间:2016-12-30 来源:查字典编辑
摘要: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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类