JavaScript Tab切换

实现按钮点击切换

（1）HTML布局

    

        
Monday
        
Tuesday
        
Wednesday
    
    

        Life is always so we covered all over with cuts and bruises,
        but later, the injured area will become the strong place.
    
    

        Books are the stepping stones to human progress.
    
    

        Always bear in mind that your own resolution to success is more important than any one thing .

    

（2）制作css样式

        *{
            margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px;
        }
        #tabs{
            background: #ffffff; padding: 50px; width: 300px; height: 200px;
        }
        #tabs ul{
            border-bottom: 2px saddlebrown solid; list-style: none;text-align: center; height: 30px;
        }
        #tabs ul li{
            float: left; width:80px; border: 1px solid darkgrey;border-bottom: none; height: 20px; padding: 4px; margin:0 5px 0 2px;  cursor: pointer;
        }
        #tabs ul li.on{
            border-top: 2px saddlebrown solid; border-bottom: 2px white solid;
        }
        #tabs div{
            line-height: 24px; padding: 10px;border: 1px steelblue solid; border-top: none;
        }
        .hide{
            display: none;
        }

（3）JS实现tab切换

 var oTabs = document.getElementById("tabs");
            var oUl = oTabs.getElementsByTagName("ul")[0];
            var oLi = oUl.getElementsByTagName("li");
            var oDiv = oTabs.getElementsByTagName("div");
            var len = oLi.length;
            for(var i=0;i