jQuery多项选项卡的实现思路附样式及代码
@CHARSET"UTF-8";
#div{
margin-bottom:10px;
position:relative;
}
#div1{
width:153px;
padding-top:0px;
padding-left:0px;
position:absolute;
}
#div1ul{
margin-top:0px;
padding-left:0px;
background-color:#ccc;
list-style:none;
}
#div1ulli{
padding-left:0px;
}
#div1ulliinput{
margin-left:15px;
}
.close{
display:none;
}
.open{
display:block;
}
jquery代码：
$(function(){
varposition=$("#xx").position();
$("#div1").offset({top:position.top+35,left:position.left+10});
$("#xx").click(function(){
$("#NG").toggleClass("open");
});
$("#div1input[name=ng]").click(function(){
vararr=newArray();
$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();});
$("#xx").val(arr.join(","));
});
});
html代码：
<divid="div"> <divalign="center"id="div2"> <formid="form1"> <inputtype="text"readonly="readonly"id="xx"/> <inputtype="submit"value="查询"/> </form> </div> <divid="div1"> <ulid="NG"> <li><inputtype="checkbox"name="ng"value=1/>1</li> <li><inputtype="checkbox"name="ng"value=2/>2</li> <li><inputtype="checkbox"name="ng"value=3/>3</li> </ul> </div> </div>