화면 전환

탭을 누르면 여러 화면을 전환하게 만들기!(js, html , css)

javascript

main = document.getElementById('genie_body'); // 화면 탭  내용
var dom={    
    lnb : {
            0 : document.getElementById('lnbMenu_genie'),
            1 : document.getElementById('lnbMenu_package'),
            2 : document.getElementById('lnbMenu_screenShot'),
            3 : document.getElementById('lnbMenu_log'),
            4 : document.getElementById('lnbMenu_rpa'),    
        },
    menu : {
        genie_body : document.getElementById('lnbMenu_genie'),
        package_body : document.getElementById('lnbMenu_package'),
        sceenShot_body : document.getElementById('lnbMenu_screenShot'),
        log_body : document.getElementById('lnbMenu_log'),
        rpa_body : document.getElementById('lnbMenu_rpa'),
    }
      }
tab = dom.lnb[0];//탭 버튼 <li>
...

/**
 *     main의 body화면을 전환
 * @params name : 전환 할 body 이름
 */
function setMainBody(name){
    console.log("현재 바디 : "+ name);

    prev_main = main; //바뀌기 전 화면 탭 내용(div) prev_main 
    main = document.getElementById(name); // 지금 선택된 탭 (div)내용 main 
    prev_main.classList.add('hide'); // 전에 탭 내용 hide 
    main.classList.remove('hide'); // 현재탭 add

    prev_tab = tab;
    tab = dom.menu[name];

    prev_tab.classList.remove('select');
    tab.classList.add('select');
}

html화면

    <li ><a href="javascript:setMainBody('genie_body');" id="lnbMenu_genie" class="btn_tab select font-none" data-tab="tab-1">GiGA Genie</a></li>
<!--클래스에 select 추가 -->

css

.hide { display:none; }

... 
.lnb { width:100%;font-size:0;padding:0;margin:0 0 30px 0; }
.lnb li { display:inline-block;width:20%;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
.lnb a[class*="btn_tab"] { display:block;width:100%;height:60px;line-height:60px; /* text-decoration:none; */ font-size:22px;color:#3a3a3a;white-space:nowrap;border-bottom:1px solid #dddddd;padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
.lnb a[class*="btn_tab"].select { border:1px solid #dddddd;border-bottom:0;font-weight:bold;color:#da4440; }