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

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

　　}

　　$(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(","));

　　});

　　});

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