JavaScript/jQuery (23) 썸네일형 리스트형 [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]네비게이션 내부에 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.. [jQuery] Depth gnb 네비게이션 $(function(){ var $header = $('#header'), $gnb = $('ul.gnb'), $gnbLi = $gnb.find(' > li'), $gnb2Dep = $gnbLi.find('.depth2') $gnbLi.on({ "mouseenter focusin" : function(){ $gnb2Dep.addClass("on"); $(this).addClass('on').find($gnb2Dep).stop().slideDown(200); }, "mouseleave focusout" : function(){ $gnb2Dep.removeClass("on"); $(this).removeClass('on').find($gnb2Dep).stop().slideUp(200); } }); }); 메.. [jQuery] 메모 포스팅.. var sFloatState = 1; /* 0 : off상태 1 : mid상태 (디폴트) 2 : on상태 */ function fnFloatControl(el){ switch(sFloatState){ case 0: //현재상태가 off상태 $(".floting-area").removeClass("off"); $(".floting-area").addClass("mid"); sFloatState = 1; break; case 1: //현재상태가 mid상태 var $getName = $(el).attr("name"); if($getName == "close"){ $(".floting-area").removeClass("mid"); $(".floting-area").addClass("off"); sFloatSt.. [jQuery] radio버튼 체크 이벤트 $('input[type=radio][name=name]').change(function() { if (this.value == '01') { alert("1"); } else if (this.value == '02') { alert("2"); } }); [jQuery] 스크롤 따라다니는 퀵메뉴 $(function(){ var $win = $(window); var top = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다. /*사용자 설정 값 시작*/ var speed = 1000; // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec) var easing = 'linear'; // 따라다니는 방법 기본 두가지 linear, swing var $layer = $('#div'); // 레이어 셀렉팅 var layerTopOffset = 0; // 레이어 높이 상한선, 단위:px $layer.css('position', 'absolute'); /*사용자 설정 값 끝*/ // 스크롤 바를 내린 상태에서 리프레시 .. 이전 1 2 3 다음
