[Javascript] 탭 이동 코드 / html, Javascript, css

 

---

 

포탈 화면 구현 시 작성한 소스.

보통 사이트마다 메인에 구현하는 작은 board를 위한 소스.

$('.tabs').find('.tab').click(function(){
        
        var tabCurr = $(this);

        var tabPrev = tabCurr.parents('ul').children('.on');
        
        tabPrev.removeClass('on');
        tabPrev.children('a').removeClass('on');
        tabPrev.children('div').removeClass('on');

        tabCurr.addClass('on');
        tabCurr.children('a').addClass('on');
        tabCurr.children('div').addClass('on');


    });

 

<div class="notice">
                        <p class="more_v">
                            <button type="button" id="" class="btn_more">more</button>
                        </p>
                        <ul class="tabs">
                            <li class="tab on">
                                <a href="#" class="title on">공지사항</a>
                                <div class="content on">
                                    <ul>
                                        <li>
                                            <a>공지사항 내용입니다~~~~ 공지공지</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>공지사항2</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>공지사항 3</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>공지사항 4</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="tab">
                                <a href="#" class="title">Q & A</a>
                                <div class="content">
                                    <ul>
                                        <li>
                                            <a>Q & A 내용입니다~~~~ Q & A</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>Q & A2</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>Q & A 3</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>Q & A 4</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="tab">
                                <a href="#" class="title">자료실</a>
                                <div class="content">
                                    <ul>
                                        <li>
                                            <a>자료실 내용입니다~~~~ 자료실</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>자료실2</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>자료실 3</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                        <li>
                                            <a>자료실 4</a>
                                            <span class="dat">2018-08-18</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

 

 

더불어 css 코드

 

@charset "utf-8";

.containerMain{background:#eaeaea;width:100%;height:100%;overflow-y:auto}
#header{width:100%;height:477px;background:#759eb4 url(../images/m_img_01.png) no-repeat top center;background-size: cover;}

@media (min-width:1025px) {
.inair_container{min-width:960px;max-width:2100px;margin:0 auto}
.header_wrap{height:80px;border-bottom:#90aec0 1px solid;background-color:rgba(15,30,40,0.3)}
.gnb_wrap{position:relative;width:1100px;margin:0 auto}
.logo{position:absolute;top:0;left:5px}
.logo_s, .btn_menu {display:none}
.gnb{float:right;}
.gnb ul{padding:0 22px}
.gnb ul li{float:left;line-height:36px;height:38px;text-align:center;margin:0 60px;padding:20px 0}
.gnb ul li:last-child{margin-right:20px}
.gnb ul li a{color:#fff;font-weight:400;font-size:20px;text-decoration:none;}
.gnb ul li.on{background:#4872a7} /*  #449e9a  #859757   */
.gnb ul li.on > a {color:#fff}

.sub_wrap{height:60px;background-color:#e0ecef;}
.sub_wrap div.submenu{position:relative;width:1100px;margin:0 auto}
.sub_wrap div.submenu .m_box{float:right;width:760px;}
.sub_wrap div.submenu .m_box ul{float:left;padding:0 80px;}
.sub_wrap div.submenu .m_box ul li{text-align:center}

}

@media (max-width:1024px) {
.inair_container{width:100%;margin:0 auto}
.header_wrap{height:60px;border-bottom:#90aec0 1px solid;background-color:#fff}
.gnb_wrap{position:relative;width:100%;margin:0 auto}
.logo{display:none}
.logo_s{position:absolute;top:10px;left:15px;}
.btn_menu{position:absolute;top:10px;right:15px}
.gnb{display:none}
.sub_wrap{display:none}

}



@media (min-width:601px) and (max-width:768px) {
.com_tit{font-size:20px;font-weight:300;line-height:33px;letter-spacing:-2.5px}
input{color:#5ab6e9}
.input_certi{background:none;border-bottom:#FFF 2px solid;width:60%;height:30px;color:#5ab6e9;line-height:30px;margin-top:30px}
/*.certifi p.btn{display:inline-block;padding-left:30px;margin-top:17px}*/
p.btn{position:absolute;top:100px;right:25px}
.btn_search{background:url(../images/btn_serarch.png) ;background-size:cover;width:64px;height:64px;text-indent:-9999em}
.btn_login{background:url(../images/btn_login.png) ;background-size:cover;width:64px;height:64px;text-indent:-9999em}
    }



@media (max-width:600px){
.com_tit{font-size:15px;font-weight:300;line-height:33px;letter-spacing:-2px}
input{color:#5ab6e9}
.input_certi{background:none;border-bottom:#FFF 2px solid;width:50%;height:30px;color:#5ab6e9;line-height:30px;margin-top:30px}
/*.certifi p.btn{display:inline-block;padding-left:30px;margin-top:17px}*/
p.btn{position:absolute;top:100px;right:25px}
.btn_search{background:url(../images/btn_serarch.png) ;background-size:cover;width:64px;height:64px;text-indent:-9999em}
.btn_login{background:url(../images/btn_login.png) ;background-size:cover;width:64px;height:64px;text-indent:-9999em}
    }

@media (max-width:768px) {
#header{width:100%;height:335px;background:#759eb4 url(../images/m_img_02.png) no-repeat center center;background-size:cover;}

.inair_wrap{width:100%;margin:0 auto}
.inair_wrap:after { display: block; content: ''; clear: both; }
.inair{width:550px;height:440px;background:url(../images/bg_ptn02.png);position:relative;margin:0 auto}
.inair_v{width:100%;height:440px;background:url(../images/bg_ptn01.png);margin:0 auto;}

.inair_tit{color:#fff;font-size:25px;font-weight:300;letter-spacing:-1.5px;padding:15px 10px 10px;}
.inair ul.toggles{padding:5px 0 10px;}
.inair ul.toggles:after { display: block; content: ''; clear: both; }
.inair ul.toggles li{float:left}
.tog_btn{display:inline-block;width:0;height:0;overflow:hidden;background:url(../images/tog_btn.png) no-repeat;text-indent:-9999em;vertical-align:top}
.btn_n1{width:76px;height:29px;background-position:-3px -39px;}
.btn_n2{width:79px;height:29px;background-position:-91px 0;margin-left:-1px}
.on .btn_n1{width:76px;height:29px;background-position:-3px 0}
.on .btn_n2{width:79px;height:29px;background-position:-91px -39px;margin-left:-1px}
.ch_map .radio{float:right;margin:20px 20px 0 0}

.ch_map{width:150px;height:350px;}
.ch_map li{color:#fff;height:50px;line-height:50px;padding-left:20px;background:#283844;border-bottom:#4e5a63 1px solid;border-top:#4e5a63 1px solid;margin-top:-1px}
.inair_map{position:absolute;left:150px;top:0;right:0;bottom:0;width:75%;height:100%;background:#4e6372}
.inair_map .map{margin:30px 20px}

.btn_wrap{background:url(../images/bg_con01.png) no-repeat top center;height:180px}
.btn_set{width:100%;margin:0 auto}
.btn_set li{float:left;width:50%;color:#fff}
.certifi{padding:2%;position:relative}
.operate{padding:2%;position:relative}



.notice_wrap{padding:0;margin:0}
.notice_area{width:100%;padding:15px 0 0 0}
.popupzone{width:90%;height:auto;margin:0 auto;padding-bottom:15px}
.popupzone img{width:100%}
.notice{width:100%;height:240px;background:#FFF;padding:15px 0 0 0;position:relative}
.more_v{position:absolute;top:30px;right:15px}
.more_v .btn_more{background:url(../images/btn_more.png) ;width:16px;height:16px;text-indent:-9999em}
.notice .tabs{width:100%;height:50px;border-bottom:#ccc 1px solid;border-left:none;/* background-color:#fafafb; */}
.notice .tabs .title{width:25%;height:50px;background-color:#fafafb;font-size:17px;color:#333;text-align:center;line-height:50px;display:inline-block;float:left;position:relative;font-weight:400;}
.notice .tabs .title:after{width:100%; height:100%; content:""; box-sizing:border-box; border:#cbced2 1px solid;border-right:0; border-bottom:none;position:absolute; top:0; left:0;}
.notice .tabs .title:last-child:after{ border:#cbced2 1px solid ;border-bottom:none}
.notice .tabs .title.on{width:25%;background:#1a77b5; /*background:#959595;*/ color:#fff; border:0;}
.notice .tabs .title.on + .title:after{ border-left:0;}
.notice .content{position: absolute;top: 50px;padding: 15px;width:98%;margin:20px 10px;font-size:15px;color:#919191;left: 5px; display:none;}
.notice .content.on{display:block}
.notice .content li{width:100%; height:42px;line-height:42px}
.notice .content li .dat{width:20%;text-align:right;font-size:13px;color:#aaa;padding-right:15px}
.notice .content li a{display: block;float: left;overflow: hidden;width: 78%;padding: 1px 0;text-overflow: ellipsis;white-space: nowrap;text-align: left;box-sizing: border-box;word-wrap: normal; color:#919191;}



#footer{background:#b6b6b6;font-size:13px}
#footer .ban{height:55px;border-top:#d8d8d8 1px solid;background:#fff;}
#footer .ban div{width:100%;margin:0 auto;}
#footer .ban div a{float:left;width:25%;text-align:center;}
#footer .ban div a img{max-width:90%;height:40px;padding:6px 0}
#footer .copyright{background:#b6b6b6 url(../images/bg_ptn03.png) repeat-x;height:100%}
#footer .copyright .policy{width:350px;margin:0 auto}
#footer .copyright .policy:after { display: block; content: ''; clear: both; }
#footer .copyright .policy li{float:left;text-align:center;padding:5px 17px;margin:10px 0;height:10px;line-height:10px;border-right:#d8d8d8 1px solid;}
#footer .copyright .policy li:first-child{padding-left:5px}
#footer .copyright .policy li:last-child{border-right:none}
#footer .copyright .policy li a{color:#e6e6e6}
#footer .copyright .comp_info{width:100%;margin:0 auto;position:relative;}
#footer .copyright .comp_info p.logo_footer{text-align:center;margin:20px 0}
#footer .copyright .comp_info ul.add_wrap{padding-top:10px;padding-left:20px}
#footer .copyright .comp_info ul.add_wrap li{color:#e6e6e6;font-weight:200;line-height:20px}
#footer .copyright .comp_info ul.add_wrap li:last-child{padding-top:15px;color:#dfdfdf}

}

@media (min-width:768px) {
.inair_wrap{width:960px;margin:0 auto}
.inair_wrap:after { display: block; content: ''; clear: both; }
.inair{float:left;width:576px;height:440px;background:url(../images/bg_ptn02.png);position:relative;}
.inair_v{float:left;width:384px;height:440px;background:url(../images/bg_ptn01.png)}

.inair_tit{color:#fff;font-size:30px;font-weight:300;letter-spacing:-1.5px;padding:20px 0 0 20px}
.inair ul.toggles{width:198px;padding:20px 20px 15px}
.inair ul.toggles:after { display: block; content: ''; clear: both; }
.inair ul.toggles li{float:left}
.tog_btn{display:inline-block;width:0;height:0;overflow:hidden;background:url(../images/tog_btn.png) no-repeat;text-indent:-9999em;vertical-align:top}
.btn_n1{width:79px;height:29px;background-position:0 -39px}
.btn_n2{width:79px;height:29px;background-position:-91px 0;margin-left:-1px}
.on .btn_n1{width:79px;height:29px;background-position:0 -0}
.on .btn_n2{width:79px;height:29px;background-position:-91px -39px;margin-left:-1px}
.ch_map .radio{float:right;margin:20px 20px 0 0}

.ch_map{width:197px;height:350px;}
.ch_map li{color:#fff;height:50px;line-height:50px;padding-left:20px;background:#283844;border-bottom:#4e5a63 1px solid;border-top:#4e5a63 1px solid;margin-top:-1px}
.inair_map{position:absolute;left:197px;top:0;right:0;bottom:0;width:379px;height:100%;background:#4e6372;}
.inair_map .map{margin:30px 20px}


.btn_wrap{background:url(../images/bg_con01.png) no-repeat top center;margin-top:-160px;height:367px}
.btn_set{padding-top:160px;width:100%;max-width:960px;margin:0 auto}
.btn_set li{float:left;width:50%;color:#fff}
.certifi{padding:2%;position:relative}
.operate{padding:2%;position:relative}
.com_tit{font-size:24px;font-weight:300;line-height:33px;letter-spacing:-2.5px}
input{color:#5ab6e9}
.input_certi{background:none;border-bottom:#FFF 2px solid;width:70%;height:30px;color:#5ab6e9;line-height:30px;margin-top:50px}
/*.certifi p.btn{display:inline-block;padding-left:30px;margin-top:17px}*/
p.btn{position:absolute;top:100px;right:25px}
.btn_search{background:url(../images/btn_serarch.png) ;width:84px;height:84px;text-indent:-9999em}
.btn_login{background:url(../images/btn_login.png) ;width:84px;height:84px;text-indent:-9999em}

.notice_wrap{height:350px}
.notice_area{width:960px;margin:0 auto;padding:35px 0}
.popupzone{width:390px;height:280px;float:left}
.notice{width:570px;height:280px;background:#FFF;float:right;padding:20px;position:relative}
.more_v{position:absolute;top:30px;right:35px}
.more_v .btn_more{background:url(../images/btn_more.png) ;width:16px;height:16px;text-indent:-9999em}
.notice .tabs{width:100%;height:50px;border-bottom:#ccc 1px solid;border-left:none;/* background-color:#fafafb; */}
.notice .tabs .title{width:25%;height:50px;background-color:#fafafb;font-size:17px;color:#333;text-align:center;line-height:50px;display:inline-block;float:left;position:relative;font-weight:400;}
.notice .tabs .title:after{width:100%; height:100%; content:""; box-sizing:border-box; border:#cbced2 1px solid;border-right:0; border-bottom:none;position:absolute; top:0; left:0;}
.notice .tabs .title:last-child:after{ border:#cbced2 1px solid ;border-bottom:none}
.notice .tabs .title.on{width:25%;background:#1a77b5; /*background:#959595;*/ color:#fff; border:0;}
.notice .tabs .title.on + .title:after{ border-left:0;}
.notice .content{position: absolute;top: 50px;padding: 15px;width:98%;margin:20px 10px;font-size:15px;color:#919191;left: 5px; display:none;}
.notice .content.on{display:block}
.notice .content li{width:100%; height:42px;line-height:42px}
.notice .content li .dat{width:20%;text-align:right;font-size:13px;color:#aaa}
.notice .content li a{display: block;float: left;overflow: hidden;width: 78%;padding: 1px 0;text-overflow: ellipsis;white-space: nowrap;text-align: left;box-sizing: border-box;word-wrap: normal; color:#919191;}



#footer{background:#b6b6b6;font-size:13px}
#footer .ban{height:60px;border-top:#d8d8d8 1px solid;background:#fff;}
#footer .ban div{width:1100px;margin:0 auto;}
#footer .ban div a{float:left;width:25%;text-align:center;}
#footer .ban div a img{width:150px;height:56px;padding:2px 0}
#footer .copyright{background:#b6b6b6 url(../images/bg_ptn03.png) repeat-x;height:180px}
#footer .copyright .policy{width:1100px;margin:0 auto;}
#footer .copyright .policy:after { display: block; content: ''; clear: both; }
#footer .copyright .policy li{float:left;text-align:center;padding:5px 30px;margin:10px 0;height:10px;line-height:10px;border-right:#d8d8d8 1px solid;}
#footer .copyright .policy li:first-child{padding-left:5px}
#footer .copyright .policy li:last-child{border-right:none}
#footer .copyright .policy li a{color:#e6e6e6}
#footer .copyright .comp_info{width:1100px;margin:0 auto;position:relative;}
#footer .copyright .comp_info p.logo_footer{position:absolute;top:20px;left:0}
#footer .copyright .comp_info ul.add_wrap{margin-left:250px;padding-top:18px}
#footer .copyright .comp_info ul.add_wrap li{color:#e6e6e6;font-weight:200;line-height:24px}
#footer .copyright .comp_info ul.add_wrap li:last-child{padding-top:15px;color:#dfdfdf}

}


.inair_v_tit{color:#222;font-size:30px;font-weight:300; letter-spacing:-1.5px}
.inari_v_info{padding:10px 0 13px}
.v_place{color:#1d71c7;font-size:18px;font-weight:400}
.v_data{color:#979797}
.inair_tbl{width:100%;}
.inair_tbl th{background:#d2dfdf;color:#474747;height:55px;line-height:55px;font-size:13px;font-weight:400;text-align: center;}
.inair_tbl td{background:#fff;height:57px;line-height:57px;border-bottom:#eaeaea 1px solid;text-align:center;}