Question

首先是我的重叠div有问题，它们应该是相互重叠但事情是在加载页面时，盒子阴影样式也重叠，这是我不想要的，并且想要修复它。

我希望每个div的框阴影是box-shadow: 0 0 2px #acacac;

但是在加载页面时，因为有3个div重叠在一起，所以框阴影看起来像是设置为box-shadow: 0 0 6px #acacac;。

第二个是试图简化我的jquery代码。我一直试图想办法在检查一个特定的单选按钮时取消选中所有选中的单选按钮，而不是有一长串的jquery代码。 “如果选中此单选按钮，取消选中已选中的单选按钮”

行中的内容继续说道的jsfiddle（http://jsfiddle.net/cQca5/3/）

希望我找到解决方案，谢谢！

Answer 1

JS：简单就是这样。隐藏所有div并显示你想要的内容。

  $(document).ready(function(){
        $('input[type="radio"]').click(function(){
            $('.div_style').css('display','none');
            $('#'+$(this).val()).fadeIn();
        });
    });

CSS：display：none in .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/

问候。

重叠Divs并简化jquery代码

1 个答案: