이벤트 위임을 이용한 탭메뉴 1 - 1
이벤트 위임을 이용한 탭메뉴 1-1
이벤트 위임을 이용한 탭메뉴
Lorem ipsum 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet commodi cupiditate molestias laboriosam sit! Delectus magni esse magnam libero
Lorem list 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Yolo 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
* {margin: 0;padding: 0;box-sizing: border-box;} *:before, *:after {box-sizing: border-box;} body {font-family: sans-serif;width: 700px;margin: 0 auto;padding: 50px;background: #333;} h1 {text-align: center;margin-bottom: 20px;color: #fff;font-size:24px;} ul {list-style: none;} footer {margin-top: 20px;text-align: center;color: #fff;} a {text-decoration: none;} .tab-section {margin: 0 auto; position: relative; width: 600px; height: 150px; border: 1px solid #d0d0d0; font-size: 0; } .tab-section::before, .tab-section::after {display: table; content: "";} .tab-section::after {clear: both;} .tab-section .tab-content {display:none;font-size: 12px;position: absolute;float: left;padding: 10px;color: #fff;-webkit-transition: all .4s ease;transition: all .4s ease;} .tab-section .tab-content.showing {display:block;} .tab-menu:after {display: table;content: "";clear:both;} .tab-menu li {float:left;width: 33.333%;} .tab-menu li.is-selected a {background-color:#282a36;color:#fff;} .tab-section .tab-link {position: relative;display: block;text-align: center;font-size: 13px;background: #fff;padding: 10px 0;border-bottom: 1px solid #d0d0d0;color: #5b5b5b;overflow: hidden;} .tab-section li ~ li .tab-link {border-left: 1px solid #bababa;}
const $tabMenu = $('.tab-menu'); const $first = $('.tab-menu li:nth-child(1)').addClass('is-selected') // 최초 선택자 const $contents = $('.tab-section .tab-content:nth-of-type(1)').addClass('showing') // 최초 선택자 let currentItem; // 최초 언디파인 이후 클릭시 addClass가 담긴다. let contentRemove; // 상동 // 텝 비활성화 const inactivete = function(remove){ remove.removeClass('is-selected') }; // 텝 활성화 const activete = function(item){ item.addClass('is-selected') currentItem = item.addClass('is-selected') // currentItem 에 담는다 }; // 컨텐츠 비활성화 const removeActivete = function(removeItem){ removeItem.removeClass('showing'); }; // 컨텐츠 활성화 const contentActivete = function(content){ content.addClass('showing'); contentRemove = content.addClass('showing') // currentItem 에 담는다 console.log(contentRemove + '쇼잉') }; const eventHandler = function(e){ const $target = $(e.target) const idx = $target.parent().index(); // 인덱스 // currentItem 에 값이 담겨 있으면 실행 if(currentItem){ inactivete(currentItem) } // contentRemove 에 값이 담겨 있으면 실행 if(contentRemove){ removeActivete(contentRemove) } // 클릭했을때 a 링크에 클래스가 있으면 실행 if($target.is('.tab-link')){ activete($target.parent()) contentActivete($target.closest('.tab-section').find('.tab-content').eq(idx)) } }; $tabMenu.on('click', 'li a', eventHandler); activete($first) contentActivete($contents)
텝메뉴 하나 만드는데 이렇게 힘들줄이야 ... 갈길이 멀다.
sub's
Blog
'개발연습막쓰기 > jQuery' 카테고리의 다른 글
jQuery 그래프 [graph] - 수치 적용 (0) | 2019.08.23 |
---|---|
jQuery 수 더하기 (0) | 2019.02.13 |
jQuery infinite scroll 무한스크롤 (0) | 2019.02.07 |
jQuery 이미지 갤러리 (0) | 2018.12.20 |
setInterval 타이머 (0) | 2018.12.09 |