div가 겹치고 jquery 코드가 단순화됩니다

Question

먼저 겹친 div가 서로 겹치는 문제가 있습니다. 서로 겹치지 만 페이지를로드 할 때 상자 그림자 스타일이 너무 겹치므로 원하지 않습니다. , 그것을 고치고 싶습니다. 3 명 div의 그것이 box-shadow: 0 0 6px #acacac;로 설정되어있는 것처럼 상자 그림자가 보이는 함께 겹쳐 있기 때문에 내가 각 사업부에 대해 원하는

상자 그림자

하지만 페이지를로드시 box-shadow: 0 0 2px #acacac;

입니다.

초는 jquery 코드를 단순화하려고합니다. jquery 코드가 긴 줄이 아니라 특정 라디오 버튼을 선택하면 선택한 모든 라디오 버튼을 선택 취소하는 방법을 찾아 냈습니다.

을 heres 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 : 디스플레이 : .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> 

는 Heres는 최적화 된 jsFiddle 한 번에 모든 문제를 solcing : http://jsfiddle.net/cQca5/5/

감사합니다.