javascript DOM getElemenntByTagName Tabタブ

3412 ワード

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <title>getElementByTagName  Tab   </title>

        <style type="text/css">

            ul{

                margin:0; 

                padding:0; 

                list-style:none; 

            }

            #tab{

                width:400px; 

                height:300px

            }

            #tab_nav{

                height:25px; 

                line-height:25px; 

                width:100%; 

                overflow:hidden; 

            }

            #tab_nav h3{

                margin:0; 

                padding:0; 

                width:80px; 

                background:#ccc; 

                line-height:25px; 

                text-align:center; 

                float:left; 

                border:2px solid white; 

                color:white; 

            }

            #tab_nav h3.hot{

                border:2px solid #888; 

                background:#888; 

            }

            #tab_content {

                width:100%; 

                height:175px; 

                background:#888; 

            }

            

            #tab_content ul {

                display:none; 

            }

            #tab_content ul.hot{

                display:block; 

            }



        </style>

    </head>

    <body>

        <div id="tab">

            <div id="tab_nav">

                <h3 onmouseover="switchTab(0)" class="hot">   1</h3>

                <h3 onmouseover="switchTab(1)">   2</h3>

                <h3 onmouseover="switchTab(2)">   3</h3>

                <h3 onmouseover="switchTab(3)">   4</h3>

            </div>



            <div id="tab_content">

                <ul class="hot">

                    <li>  1</li>

                    <li>  1</li>

                </ul>

                <ul>

                    <li>  2</li>

                    <li>  2</li>

                </ul>

                <ul>

                    <li>  3</li>

                    <li>  3</li>

                </ul>

                <ul>

                    <li>  4</li>

                    <li>  4</li>

                </ul>

            </div>

        </div>

        <script type="text/javascript">

            var h3os = document.getElementsByTagName('h3'); 

            var ulos = document.getElementById('tab_content').getElementsByTagName('ul'); 

            function switchTab(num){

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

                    if (i == num){

                        h3os[i].className = 'hot'; 

                        ulos[i].style.display = 'block'; 

                    } else {

                        h3os[i].className = ''; 

                        ulos[i].style.display = 'none'; 

                    }

                }

            }

        </script>

    </body>

</html>