링크를 클릭하면 팝업 창이 뜨는 jQuery 코드입니다. 상황에 따라 다양하게 응용이 가능할 것 같습니다. 여러 가지 코드를 테스트해봤는데, 이 코드가 심플하면서도 잘 실행되네요. 코드 <head> <style> a.selected { background-color:#1F75CC; color:white; z-index:100; } .messagepop { background-color:#FFFFFF; ...
클릭하면 숨겨졌던 요소가 슬라이드로 표시되는 기본적인 jQuery 샘플입니다. 예제: <head> <style> #side{ float:right; width:50px; height:50px; background: #428D9B; } .hide{ display:none; } #slidable{ float:right; height:50px; background:#F4F4F4 width:200px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $( "#side" ...
$("#test").hide() ID가 "test"인 요소를 숨깁니다. 예제: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head><body> <h2>제목</h2> <p>첫 번째 문장</p> <p id="test">아래 버튼 클릭 시 숨겨지는 문장</p> <button>클릭</button> </body></html> 실행 ...
$("p").hide() 모든 <p> 요소를 숨깁니다. 예제: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body> <h2>제목</h2> <p>첫 번째 문장.</p> <p>다른 문장.</p> <button>클릭</button> </body> 실행 예: (Source: w3schools.com)
