重叠Div和简化jquery代码
重叠Div和简化jquery代码
提问于 2014-05-14 11:01:38
首先是我重叠的div的麻烦，它们应该是相互重叠的，但是问题是在加载页面时，框影样式也是重叠的，我不想这样做，并且想要修复它。
我想要的每个div的框影是box-shadow: 0 0 2px #acacac;。
但是在加载页面时，由于有3个div重叠在一起，框影看起来就像是被设置为box-shadow: 0 0 6px #acacac;。
第二，试图简化jquery代码，我一直在试图找到一种方法，在检查特定的单选按钮时，只需取消选中的所有单选按钮，而不是使用长行jquery代码。“如果此单选按钮选中，则取消选中单选按钮”行中的内容。
这是小提琴(http://jsfiddle.net/cQca5/3/)
希望我能找到解决办法，谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-14 11:12:03
JS:就这么简单。把所有的div都藏起来，展示你想要的。
$(document).ready(function(){
$('input[type="radio"]').click(function(){
$('.div_style').css('display','none');
$('#'+$(this).val()).fadeIn();
});
});CSS：.div_style中没有显示
.div_style{
position:absolute;
border:1px solid #acacac;
width:750px;
height:500px;
border-radius:2px;
box-shadow: 0 0 2px #acacac;
top:40px;
left:0px;
display:none;
background:#FFF;
}
#diva{
z-index:1;
}
#divb{
}
#divc{
}HTML: attr名称应该是相同的。显示:为第一个div块。
<div>
<label><input type="radio" name="radio" value="div1" checked> 1st</label>
<label><input type="radio" name="radio" value="div2"> 2nd</label>
<label><input type="radio" name="radio" value="div3"> 3rd</label>
</div>
<div class="div_style" style='display:block;' id="div1">div1</div>
<div class="div_style" id="div2">div2</div>
<div class="div_style" id="div3">div3</div>下面是一个优化的jsFiddle，同时解决所有问题：http://jsfiddle.net/cQca5/5/
致以问候。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23652762
复制相关文章
相似问题
腾讯云开发者
