웹통 | 강좌Zone
홈 > 튜터리얼 > Tutorial

강좌는 관리자 승인 후 등록되며 등록 확정시 5,500포인트가 부여됩니다.(업무일 기준 오후 5시30분 1회 심사) 

 

jQuery - select 박스 내용 show/hide

weBtonG 0 795 0
상단 붉은색바를 클릭하시면 해당 사이트로 이동합니다.

 

select 박스를 이용하여 하단의 내용이 보이고 숨기는 간단한 스크립트입니다.

웹사이트 제작 시 일반 회사에서 공시/공고 페이지 제작 시에 가끔 사용하여 미리 제작해 두었습니다.

 

09f1c8a8ad3ca0344cd69088170e9349_1620957326_7763.png
 

 

 

간단히 제이쿼리를 이용하여 제작되었으며, 저도 포스팅을 해두면 바로 사용할 수 있어 등록하였습니다.

 

 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script> $(function(){ $("#x_select").change(function() { $(".v_none").css("display","none"); $("#table"+$(this).val()+":not(:animated)").fadeIn("slow"); }); }); </script> <style> .content_wrap {max-width: 400px;margin: 0 auto} .v_none {display: none;margin: 20px auto;border: 1px solid;padding: 20px} #x_select {-webkit-appearance: none;-moz-appearance: none;appearance: none;border: solid 1px #cbcbcb;border-radius: 3px;padding: 0 40px 0 10px;background: url(http://temp20.zsol.co.kr/all_img/ico_select.png) right center no-repeat #fff;height: 41px;width: 100%} </style> <div class="content_wrap"> <select id="x_select"> <option value="1" selected>첫 번째 셀렉트 박스</option> <option value="2">두 번째 셀렉트 박스</option> <option value="3">세 번째 셀렉트 박스</option> <option value="4">네 번째 셀렉트 박스</option> <option value="5">다섯 번째 셀렉트 박스</option> <option value="6">여섯 번째 셀렉트 박스</option> <option value="7">일곱 번째 셀렉트 박스</option> </select> <div id="table1" class="v_none" style="display:block">첫 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table2" class="v_none">두 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table3" class="v_none">세 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table4" class="v_none">네 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table5" class="v_none">다섯 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table6" class="v_none">여섯 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table7" class="v_none">일곱 번째 셀렉트 박스 내용이 들어갑니다.</div> </div> 

, , , , , , , ,

0 Comments
다음글
Close