jQuery12 [jQuery] img 태그 경로(src) 변경 제이쿼리(jQuery)를 이용하여 버튼 클릭 시 img 태그 경로(src) 변경하기 [html] change [js] $(document).ready(function(){ $('#btn').click(function(){ $('img').attr('src', '교체 이미지 주소'); }) }); See the Pen [jQuery] attr img src _ 이미지 경로 변경 by Jinsik Son (@Jinsik-Son) on CodePen. 2023. 6. 7. [jQuery] 마우스 오버(hover) 내려오는 드롭 메뉴 제이쿼리(jQuery)를 이용하여 마우스 오버(hover) 내려오는 slide down 드롭 메뉴 만들기 [html] menu1 drop menu2 drop menu3 drop [css] ul{ display: flex; gap: 10px; } li{ position: relative; width: 100px; list-style: none; background: yellowgreen; } .drop-menu-wrap{ display: none; position: absolute; width: 100%; height: 60px; background: skyblue; } [js] $(document).ready(function(){ $('nav > ul > li').mouseover(function(){ .. 2023. 6. 6. [jQuery] 스크롤(scroll) 위치 감지 이벤트 제이쿼리(jQuery)를 이용하여 스크롤(scroll) 감지 이벤트 만들기 스크롤 시 배경색 변경 예시 [html] main menu [css] .menu{ position: fixed; top: 0; width: 100%; height: 40px; background: pink; } .menu.active{ background: blue; color: #fff; } .container{ width: 100%; height: 800px; } [js] $(document).on('scroll', function(){ if($(window).scrollTop() > 100){ $('.menu').addClass('active'); }else{ $('.menu').removeClass('active'); } .. 2023. 6. 2. 이전 1 2 다음 728x90