JavaScript (29) 썸네일형 리스트형 [jQuery] 아코디언 메뉴 만들기 HTML asd asdasd asdasd asdasd asda asdasd CSS li .con{display:none;} JS $('ul.qna_list').on('click','.tit', function() { var $this = $(this); var $hasCls = $this.hasClass("on"); $this.closest("li").find(".con").stop().slideDown(400); $this.closest("ul").find("li .tit").each(function(){ $(this).removeClass("on"); $(this).closest("li").find(".con").stop().slideUp(400); }).promise().then(function().. [jQuery] 체크박스로 활성화,비활성화 제어하기 체크박스 선택시 활성화,비활성화로 바꾸는 기능이 필요해서 메모.. HTML 버튼입니다. 버튼 CSS .box.on{color:#999;} JS $(".box button").attr("disabled", true); $("#chk").on('click',function(){ var chk = $('input:checkbox[id="chk"]').is(":checked"); if(chk==true){ $(".box button").removeAttr('disabled'); $(".box").removeClass("on"); }else{ $(".box button").attr("disabled", true); $(".box").addClass("on"); } }); [jQuery] attr("rel")을 사용한 여러개의 탭 만들기 한페이지에서 여러가지의 탭을 사용할때 사용하면 유용한 스크립트. rel 값과 콘텐츠의 id 값만 맞춰주면 된다 HTML 탭1 탭2 탭3 내용1 내용2 내용3 탭1 탭2 탭3 내용1 내용2 내용3 CSS .tab_area ul li a.on{color:red} JS $(function(){ $(".conbox").hide(); $(".tab_area .conbox:first-child").show(); $(".tab_area ul li").on('click','a',function () { $(".tab_area li a").removeClass("on"); $(this).addClass("on"); $(this).closest("div").find(".conbox").hide(); var activeTa.. [jQuery] Swiper 여러개 사용하기 JS $(".swiper-brand").each(function(index, element){ var $this = $(this); $this.addClass("instance-" + index); var swiper = new Swiper(".instance-" + index, { observer: true, observeParents: true, slidesPerView : 1, slidesPerGroup :1, pagination: { el: '.swiper-pagination', clickable: true, }, }); }); [jQuery]waypoints를 이용한 스크롤 애니메이션 http://imakewebthings.com/waypoints/ LINK HTML 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 CSS $(".e_wrap").each(function() { new Waypoint.Inview({ element: this, enter: function(direction) { $(this.element).addClass("fadeInDown"); } }); }); }); [jQuery] masonry-docs - 가변높이 레이아웃 위와같이 가변높이인 item을 자동으로 잡아준다. https://masonry.desandro.com/ (test.html 참고) SCRIPT JS $(function(){ var $grid = $('.masonry').masonry({ itemSelector: '.item', columnWidth: 1, percentPosition: true }); }); HTML 111 111 111 222 222 222 333 333 333 CSS *{margin:0; padding:0;} #wrap{width:1200px; margin:0 auto; font-size:0; text-align:center;} #wrap div{display:inline-block; vertical-align:top; width:3.. [jQuery]네비게이션 내부에 swiper 넣기 swiper 마크업은 생략 기존의 JS Code var $header = $('#header'), $gnb = $('ul.gnb_ul'), $gnbLi = $gnb.find(' > li'), $gnb2Dep = $gnbLi.find('.depth_area') $gnbLi.on({ "mouseenter focusin" : function(){ $gnb2Dep.addClass("on"); $(this).addClass('on').find($gnb2Dep).show(); }, "mouseleave focusout" : function(){ $gnb2Dep.removeClass('on'); $(this).removeClass('on').find($gnb2Dep).hide(); } }); 수정된 JS Code v.. [jQuery] data값을 이용한 hover 메뉴 클릭시 메뉴박스가 펼쳐지고리스트 mouseenter 시 그에맞는 depth가 나오고, 영역밖으로 나갔을때 마지막 hover는 유지되며 메뉴박스는 사라지는 구조이다. 버튼 01 02 03 ... 09 내용이네용 내용이네용 내용이네용 ... 내용이네용 $(".cate-btn").on('click','button', function(){ if($(this).hasClass('on')) $('.cate-btn, .category-box').removeClass('on'); else $('.cate-btn, .category-box').addClass('on'); return false; }); $(document).on('mouseleave', '.category-box', function(){ if($(thi.. 이전 1 2 3 4 다음
