728x90
반응형
SMALL

jquery #tabmenu #tab #jquerytabmenu #제이쿼리 #제이쿼리기초 #탭메뉴 #탭메뉴구현법 #탭메뉴제이쿼리 #제이쿼리탭메뉴 3

제이쿼리 | 메뉴구성 두가지방법 | mouseenter , mouseleave

1. 각각의 메뉴 선택하면 각각의 하위메뉴가 내려옴 html 구성 div>header>section>h1 div>header>section>ul>li>a div>header>section>ul>li>ul>li>a jquery $(document).ready(function(){ $('#menu>li').mouseenter(function(){ $(this).find('.submenu').stop().slideDown(); $(this).find('a').addClass('on'); }); $('#menu>li').mouseleave(function(){ $(this).find('.submenu').stop().slideUp(); $(this).find('a').removeClass('on'); }); }..

디자이너로서 2022.05.19

제이쿼리 | 토글기능 toggle보다 더나은방법 | slideUp, slideDown | if문

html 구성하기 div > ul > li > a div > ul > li > ul > li > a (a와 ul이 동료) siblings관계 jquery $(document).ready(function(){ $('div>li>a').click(function(){ if($(this).hasClass('on')){ $('div>li>a').removeClass('on'); $('.sub').slideUp(); }else{ $('.sub').slideUp(); $(this).siblings('.sub').slideDown(); $('#menu>li>a').removeClass('on'); $(this).addClass('on'); } }); }); div>li>a를 클릭했을때 (li 대신 a로하는이유는 클래..

디자이너로서 2022.05.10

제이쿼리 로 만드는 탭메뉴 | 아주쉬운방법

html : 구성방법 div#tabmenu > ul > li : 탭메뉴 div#tabmenu > dl > dt,dd : 탭메뉴에따라 바뀌는 하위내용 (그래서 li와 dl은 개수가 동일하다. ) jquery : 1.일단 첫번째 탭메뉴가 눌러진상태유지 2.다른거 눌렀을 때 변화 - 첫번째꺼 눌렀을때 , 두번째꺼 눌렀을 때 각각 제작 - 내가선택한 탭메뉴를 눌렀을때로 한개 제작 1. $(document).ready(function(){ $('#tabmenu dl').first().show(); $('#tabmenu li').first().addClass('on'); 2-1. $('#tabmenu li').eq(1).click(function(){ $('#tabmenu li').removeClass('on');..

디자이너로서 2022.04.30
728x90
반응형
LIST