div show hide 숨기고 보이기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script> function show1(){ document.getElementById('div1').style.display ='block'; document.getElementById('div2').style.display = 'none'; } function show2(){ document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display ='block'; } </script> </HEAD> <BODY> <div style="margin:50px auto 0 auto; border:1px solid #ccc; width:80%; padding:15px "> <p>당신이 조만간 가게될 여행은 무엇입니까? -- 순수 스크립트 형태 ie7 동작</p> <input type="radio" name="tab" value="igotnone" onclick="show1();" /> 허니문 <input type="radio" name="tab" value="igottwo" onclick="show2();" /> 가족여행 <div id="div1" style="display:none"> <hr style="border:0; border-bottom:1px solid #ebebeb; background:#fff"><p>허니문을 가게된다면, 좋아하는 지역은?</p> <input type="checkbox" value="Yes" name="one"> 태국 <input type="checkbox" value="Yes" name="two"> 발리 </div> <div id="div2" style="display:none"> <hr style="border:0; border-bottom:1px solid #ebebeb; background:#fff"><p>가족여행은 누구랑 가게됩니까?</p> <input type="checkbox" value="Yes" name="one"> 부모님 <input type="checkbox" value="Yes" name="two"> 아내와 아이들 </div> </div> <div style="margin:50px auto 0 auto; border:1px solid #ccc; width:80%; padding:15px "> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("input[name='test']").click(function () { $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none'); $('#show-me2').css('display', ($(this).val() === 'b') ? 'block':'none'); $('#show-me3').css('display', ($(this).val() === 'c') ? 'block':'none'); }); }); </script> <p>좋아하는 색상은 무엇입니까? -- JQUERY형태</p> <input name='test' type='radio' value="a" />빨간색 <br /> <input name='test' type='radio' value="b" />노란색 <br /> <input name='test' type='radio' value="c" />파란색 <div id='show-me' style='display:none'><hr style="border:0; border-bottom:1px solid red; background:#fff">빨간색을 좋아하시는군요</div> <div id='show-me2' style='display:none'><hr style="border:0; border-bottom:1px solid yellow; background:#fff">저도 노란색을 좋아합니다.</div> <div id='show-me3' style='display:none'><hr style="border:0; border-bottom:1px solid blue; background:#fff">파란색은 역시 시원한 느낌을 주죠 ^^</div> </div> </BODY> </HTML>
