규호의 공부방

<html>

    <style type="text/css">

        .hide{display:none}

        #menu{

            padding-left:0;

}

        #menu li{

            float:left;

            margin-left:20px;

}

        #canvas{

            clear:both;

}

    </style>

    <body>

        <ul id="menu">

            <li><a id="gogh" href="#tab1">고흐</a></li>

            <li><a id="gaudi" href="#tab2">가우디</a></li>

            <li><a id="albrecht" href="#tab3">알브레히트 뒤러</a></li>

        </ul>

        <div id="canvas">

            <div id="gogh_img">

                <img src="http://farm3.static.flickr.com/2435/3687464186_5ca34c866c.jpg" />

            </div>

            <div class="hide"  id="gaudi_img">

                <img src="http://farm2.static.flickr.com/1027/5184060937_679f620225.jpg" />

            </div>

            <div class="hide"  id="albrecht_img">

                <img src="http://farm5.static.flickr.com/4084/4979876994_5bce879910.jpg" />

            </div>

        </div>

        <script type="text/javascript">

      <!-- 크로스 브라우징을 위해서...브라우져마다 이벤트 받는 객체가 다름 -->

            function addEvent(el, eType, fn, uC) {

                if (el.addEventListener) { <!-- 파폭, 크롬..-->

                    el.addEventListener(eType, fn, uC);

                    return true;

                } else if (el.attachEvent) { <!-- 익스플로러 -->

                    return el.attachEvent('on' + eType, fn);

                } else {

                    el['on' + eType] = fn;

}

}

            function clickHandler(e){ <!--브라우져가 이 함수로 이벤트를 받음-->

                var id = e.target.id; <!--이벤트 타겟의 아이디를 받음-->

                 <!--해당 id의 엘리먼트를 지칭-->

                var t = document.getElementById(e.target.id+'_img');

                var p = document.getElementById('canvas');

                <!--줄바꿈을 포함한 하위엘리먼트의 숫자-->

                for(var i = 0 ; i < p.childNodes.length ; i ++){

                    var c = p.childNodes[i];

                    if(c.nodeName == 'DIV'){ <!--DIV 태그라면 class=hide -->

                        c.setAttribute('class', 'hide');

}

}

                t.setAttribute('class', ''); <!-- 클릭했던 타겟만 hide 안 함-->

}

            addEvent(document.getElementById('gogh'), 'click', clickHandler)

            addEvent(document.getElementById('gaudi'), 'click', clickHandler)

            addEvent(document.getElementById('albrecht'), 'click', clickHandler)

        </script>

    </body>

</html>

2016년 10월 16일 일요일