javascript DOM getElementByTagName Tab选项卡

<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> 

 

posted @ 2012-05-25 15:51  前望  阅读(459)  评论(0编辑  收藏  举报