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>
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短