관리 메뉴

moozi

tab 본문

TIS_2016/HTML5_1기

tab

moozi 2016. 4. 5. 14:33

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab</title>

    <style type="text/css">

    ul.tab {

        list-style-type: none; /* 기호 없애기 */

        margin: 0;

        padding: 0;

        overflow: hidden;

        border: 1px solid #ccc;

        background-color: #f1f1f1;

    }

        

    ul.tab li {float: left;}    

                 

    ul.tab li a {

        display: inline-block; /* 가로방향으로 블럭설정 */

        color: black;

        text-align: center;

        padding: 14px 16px;

        text-decoration: none;

        transition: 0.3s;

        font-size: 17px;

    }

    

    ul.tab li a:hover {background-color: #ddd;}    

    ul.tab li a:focus, .active {background-color: #ccc;}


    .tabcontent {

        display: none;

        padding: 6px 12px;

        border: 1px solid #ccc;

        border-top: none;

        -webkit-animation: fadeEffect 1s;

        animation: fadeEffect 1s; /* 1초동안 fadeEffect 실행 */

    }

    .tab1{

        display: block; 

    }

        

        

        

    @-webkit-keyframes fadeEffect {

        from {opacity: 0;}

        to {opacity: 1;}

    }


    @keyframes fadeEffect {

        from {opacity: 0;}

        to {opacity: 1;}

    }    

    </style>

    <script type="text/javascript">

    function init(){

        // 아이디 London을 찾아서 보이게.

        document.getElementById("London").style.display = "block";

        // tablinks 클래스로 찾아서 첫번째에 active클래스 적용

        var tab=document.getElementsByClassName("tablinks");

        tab[0].classList.add("active");

    }    

        

    function openCity(evt, cityName) {

        

        var i, tabcontent, tablinks;


        // tabcontent클래스가 적용된 부분을 모두 안보이게 함.

        tabcontent = document.getElementsByClassName("tabcontent");

        for (i = 0; i < tabcontent.length; i++) {

            tabcontent[i].style.display = "none";

        }


        // tablinks클래스가 적용된 부분를 찾아서 active클래스 미적용

        tablinks = document.getElementsByClassName("tablinks");

        for (i = 0; i < tabcontent.length; i++) {

            tablinks[i].classList.remove("active");

        }


        // cityName매개변수에 저장된 id로 찾아서 보이게.

        document.getElementById(cityName).style.display = "block";

        //이벤트가 발생된 객체에 active클래스 적용

        evt.currentTarget.classList.add("active");

    }

    </script>

</head>

<body onLoad="init()">

 <ul class="tab">

<!--  <li><a href="#" class="tablinks active" onclick="openCity(event, 'London')">London</a></li>-->

  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>

  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>

  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>

</ul>


<!--

<div id="London" class="tabcontent .tab1">

  <h3>London</h3>

  <p>London is the capital city of England.</p>

</div>

-->


<div id="London" class="tabcontent">

  <h3>London</h3>

  <p>London is the capital city of England.</p>

</div>


<div id="Paris" class="tabcontent">

  <h3>Paris</h3>

  <p>Paris is the capital of France.</p> 

</div>


<div id="Tokyo" class="tabcontent">

  <h3>Tokyo</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>

</body>

</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

modal  (0) 2016.04.06
버튼예제  (0) 2016.04.06
accordian  (0) 2016.04.05
달력 예제  (0) 2016.04.05
2차 포트폴리오  (13) 2016.04.05
Comments