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 @   前望  阅读(460)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示