html中对集合元素li的控制
出问题的代码片段： 在ie6里会出现问题，页面的布局被打乱。<li><div class="email_popupa_lidiv"><h1><input name="unitType"type="radio" value="S" checked/></h1><h2>買樓</h2><h1><input name="unitType" type="radio" value="R" /></h1><h2>租樓</h2></div></li>
<li id="sellLi"><h3>售&nbsp;價*</h3><div class="email_popupa_lidiv1"><input name="sellMin" id="sellMin" type="type" value="" /></div><h2 style="width:20px;">至</h2><div class="email_popupa_lidiv1"><input name="sellMax" id="sellMax" type="type" value="" /></div><h2>萬元</h2></li>
<li id="rentLi" style="display:none;"><h3>租&nbsp;價*</h3><div class="email_popupa_lidiv1"><input name="rentMin" id="rentMin" type="type" value="" /></div><h2 style="width:20px;">至</h2><div class="email_popupa_lidiv1"><input name="rentMax" id="rentMax" type="type" value="" /></div><h2>元</h2></li>
<script type="text/javascript">
$('input').click(function(){
if($(this).val()=="S"){
$('#rentLi').hide();
$('#sellLi').show();
}
if($(this).val()=="R"){
$('#rentLi').show();
$('#sellLi').hide();
}
});
</script>
总结：通过控制li的display的显示、隐藏来实现li的可见，这样在ie6里会出现问题，打乱页面的布局。
解决方法：不控制集合对象li的显示、隐藏，把li的内容包入div内部，控制div的显示隐藏，这样，当div隐藏后，li自动就隐藏了。页面布局也不再被打乱。
解决！
<li><div class="email_popupa_lidiv"><h1><input name="unitType"type="radio" value="S" checked/></h1><h2>買樓</h2><h1><input name="unitType" type="radio" value="R" /></h1><h2>租樓</h2></div></li>
<li><divid="sellLi"><h3>售&nbsp;價*</h3><div class="email_popupa_lidiv1"><input name="sellMin" id="sellMin" type="type" value="" /></div><h2 style="width:20px;">至</h2><div class="email_popupa_lidiv1"><input name="sellMax" id="sellMax" type="type" value="" /></div><h2>萬元</h2></div></li>
<li><divid="rentLi" style="display:none;"><h3>租&nbsp;價*</h3><div class="email_popupa_lidiv1"><input name="rentMin" id="rentMin" type="type" value="" /></div><h2 style="width:20px;">至</h2><div class="email_popupa_lidiv1"><input name="rentMax" id="rentMax" type="type" value="" /></div><h2>元</h2></div></li>
$('input').click(function(){
if($(this).val()=="S"){
$('#rentLi').hide();
$('#sellLi').show();
}
if($(this).val()=="R"){
$('#rentLi').show();
$('#sellLi').hide();
}
});
思考：总结下页面集合元素的display在不同浏览器中的支持。
页:
[1]