javascript/dom:原生的JS写选项卡方法

来源:http://www.jb51.net/article/30108.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script> 
        function tab()
        {
            var list = document.getElementById("list").getElementsByTagName("li");
            var con = document.getElementById("con").getElementsByTagName("div"); 
            for(var i = 0;i<list.length;i++)
            {
                list[i].onclick=function()
                { 
                    for(var i=0;i<list.length;i++)
                    { 
                        if(list[i]==this)
                        { 
                            list[i].className = "on";
                            con[i].style.display = "block"; 
                            //alert(list[i].className);
                        } 
                        else
                        { 
                            list[i].className=""; 
                            con[i].style.display="none";
                        } 
                    } 
                } 
            } 
        } 
        window.onload=function(){tab();}
    </script>  
    </head>
    <body>
        <div id="list"> 
            <ul> 
                <li class="on">1</li> 
                <li>2</li> 
                <li>3</li> 
                <li>4</li> 
            </ul> 
        </div> 
        <div id="con"> 
            <div style="display:block;">111111</div> 
            <div style="display:block;">222222</div> 
            <div style="display:block;">333333</div> 
            <div style="display:block;">444444</div> 
        </div>  
    </body>
</html>

 

 

 

posted @ 2013-04-12 00:36  KeenLeung  阅读(329)  评论(0)  编辑  收藏  举报