반응형 html494 jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 jQuery의 click() 이벤트 함수는 사용자가 HTML 요소를 클릭할 때 특정 작업을 수행하도록 JavaScript 코드를 실행하는 데 사용됩니다. 아래는 가장 일반적으로 사용되는 click() 이벤트 함수 예제 입니다. 1. 버튼 클릭 시 텍스트 변경 클릭하세요 이곳의 텍스트가 변경됩니다. 2. 리스트 항목 추가하기 리스트 항목 추가 기존 항목 1 기존 항목 2 3. 토글 버튼으로 요소 보이기/숨기기 토글 이 텍스트는 토글됩니다. 4. 특정 클래스의 모든 버튼에 이벤트 적용 버튼 1 버튼 2 버튼 3 이 예제들은 jQuery의 click() 이벤트를 실용적으로 활용하는 데 기본적인 시작점이 될 것입니.. 2024. 11. 18. React Select with multiple option #html / css(scss) / js(Babel)#React Select with multiple option#Author : CrocoDillon https://codepen.io/CrocoDillon/pen/MpMoZe React Select with multiple optionCopyright by my client on design and chevron icons, other icons are from iconic :)...codepen.io #react #selectbox #multipleoption #html #css #scss #js #babel 2024. 11. 15. React App with React Select #html / css / js#React App with React Select#Author : Irfan Hanfi https://codepen.io/irfanhanfi/pen/EGXdOQ React App with React Select...codepen.io #react #selectbox #select #box #html #css #js #app 2024. 11. 15. React Select Box #html / css(Sass) / js(Babel)#React Select Box#Author : Brandon#select box https://codepen.io/blehr/pen/pbjNGR React Select Box...codepen.io #React #selectbox #select #box #html #css #js #sass #babel 2024. 11. 15. jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤 jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤하려면 일반적인 방법으로는 앵커 태그를 사용하여 해결할 수 있습니다. 기본적으로 HTML의 id를 사용한 앵커 링크를 클릭하면 다른 페이지로 이동하고 해당 페이지에서 특정 위치로 바로 이동할 수 있습니다. 하지만 부드러운 스크롤 애니메이션을 유지하기 위해서는 새 페이지에서도 jQuery를 사용하여 해당 위치로 스크롤하도록 설정해야 합니다. 1. 기본 HTML 앵커 링크 방식Go to Section 2 on Page 2 2. 목표 파일에서 특정 위치로 부드럽게 이동 (예: page2.html)이제, page2.html에 특정 위치로 부드럽게 이동하는 jQuery 코드를 추가할 수 있습니다. .. 2024. 10. 22. jQuery로 iframe에서 부모 창 함수 호출 jQuery로 iframe에서 부모 창의 함수를 호출하려면, JavaScript의 window.parent 객체를 사용할 수 있습니다. window.parent는 iframe의 부모 창을 참조하기 때문에 이를 통해 부모 창의 함수를 호출할 수 있습니다.예를 들어, 부모 창에 parentFunction이라는 함수가 있다고 가정하면, iframe 내부에서 이 함수를 호출하는 코드는 다음과 같습니다. 부모 창 코드 (parent.html) 부모 창 iframe 코드 (iframe.html) Iframe 부모 함수 호출 설명window.parent를 사용하여 부모 창에 접근합니다.parentFunction()은 부모 창에 정의된 함수이며, iframe에서 이를 호출하려면 w.. 2024. 9. 28. jQuery 새 창에서 부모 창 새로 고침 팝업 창에서 부모 창 새로고침 jQuery를 사용하여 새 창(팝업 창)에서 부모 창을 새로고침하는 방법은 다음과 같습니다. 이 방법은 팝업 창이 부모 창과 동일한 도메인에서 열려 있을 때 작동합니다. 팝업 창에서 부모 창을 새로고침하려면 window.opener 객체를 사용할 수 있습니다. // 부모 창을 새로고침하는 코드if (window.opener && !window.opener.closed) { window.opener.location.reload(); // 부모 창 새로고침 window.close(); // 팝업 창 닫기 (선택 사항)} 설명window.opener: 팝업 창을 열어준 부모 창을 가리킵니다. 팝업 창에서 부모 창에 접근할 때 사용됩니다.window.opener.. 2024. 9. 2. Timeline html, css, jsTimelineAuthor : haraldev01타임라인 / Timeline https://codepen.io/haraldev01/pen/NWVvNqy TimelineTimeline element inspired by Ibelick: https://www.ibelick.com/lab/timeline I expanded on the design, as it now correctly shows the selected year, high...codepen.io 2024. 8. 8. Horizontal Timeline of Web Development html, css, jsHorizontal Timeline of Web DevelopmentAuthor : Jerome Rass타임라인 / Timeline https://codepen.io/jerora98/pen/yLWzYGO Horizontal Timeline of Web DevelopmentExplore the evolution of web development through this interactive horizontal timeline. Scroll horizontally to navigate through the major milestones in ...codepen.io 2024. 8. 8. Basic Timeline html, css, jsBasic TimelineAuthor : J타임라인 / Timeline https://codepen.io/jaingam/pen/RwmjarP Basic TimelineBasic timeline component with dark mode compatibility. Using tailwindcss....codepen.io 2024. 8. 8. Timeline in Dark Theme html, cssTimeline in Dark ThemeAuthor : Muzammal Ahmed타임라인, Timeline https://codepen.io/MuzammalAhmed/pen/MWdVwVo Timeline in Dark ThemeIDK what to say but follow me for more awesome content...codepen.io 2024. 8. 8. Scrolling timeline clickable years html, css, jsScrolling timeline clickable yearsAuthor : buildplan타임라인 / Timeline https://codepen.io/buildplan/pen/pomLawb Scrolling timeline clickable yearsScrolling timeline clickable years with jquery...codepen.io 2024. 8. 8. 이전 1 2 3 4 ··· 42 다음
