탭메뉴 1-1

이벤트 위임을 이용한 탭메뉴 1 - 1

---

이벤트 위임을 이용한 탭메뉴 1-1

이벤트 위임을 이용한 탭메뉴

    

        
Tab 1
        
Tab 2
        
Tab 3
    
    

        
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