단계가 있는 회원가입(참고(1))

클릭한 탭에 따라 속성 변경, div 보이고 숨기기

 

 

---

 

 

 

 

 

#tab.html

    <style>
        .wrap{
            width:400px;
        }
        .navi {
            list-style-type: none;
            padding: 0;
        }

        .tab {
            float: left;
            background-color: black;
            color: white;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            box-sizing: border-box;
            border: 1px solid black;
            border-bottom: none;
        }
        .contents{
            border: 1px solid black;
            box-sizing: border-box;
        }
        .content{
            height: 300px;
            font-size: 50px;
            display: none;
        }
    </style>

---

    <div class="wrap">
        <ul class="navi">
            <li class="tab" onclick="selectTab(0);">11</li>
            <li class="tab" onclick="selectTab(1);">22</li>
            <li class="tab" onclick="selectTab(2);">33</li>
            <li class="tab" onclick="selectTab(3);">44</li>
        </ul>
        <div class="contents">
            <div class="content">11111</div>
            <div class="content">22222</div>
            <div class="content">33333</div>
            <div class="content">44444</div>
        </div>
    </div>

---

    <script>
        //onload시 가장 처음 1번화면이 보이도록 세팅
        window.onload = function() {
            selectTab(0);
        }

        function selectTab(idx) {
            var tabs = document.getElementsByClassName("tab");
            
            var content = document.getElementsByClassName("content");
            
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].style.backgroundColor = "black";
                tabs[i].style.color = "white";
            }
            
            //div 전부 display="none"으로 숨기기
            for (var i = 0; i < content.length; i++) {
                content[i].style.display = "none";
            }
            
            //클릭된 tab 속성 변경
            tabs[idx].style.backgroundColor = "white";
            tabs[idx].style.color = "black";
            
            //클릭된 tab의 인덱스로 content display속성 변경
            content[idx].style.display = "block";
        }
    </script>