漂亮的Tab切换功能

每日鸡汤： 你今天的努力，是幸运的伏笔。当下的付出，是明日的花开。

/* --------------------------- html -------------------------------- */
<div class="box">
    <ul class="menu">    
        <li class="se">新 闻</li>
        <li>体 育</li>
        <li>娱 乐</li>
    </ul>
    <div class="content">
        <div>新闻的内容</div>
        <div class="none">体育的内容</div>
        <div class="none">娱乐的内容</div>
    </div>
</div>
    

/* --------------------------- css -------------------------------- */
*{margin:0;padding:0;}
html,body{width:100%;height:100%;font-family:'微软雅黑'}
ul{list-style:none;}
.box{ float:left;margin:19px;width:300px;}
li{border:1px #ddd solid;background:#F9F9F9;line-height:30px;text-align:center;margin:1px;cursor:pointer;float:left;padding:0 15px;}
.se{border:1px #CC3300 solid;background:#FF6;color:#900000;font-weight:bold;}
.content{clear:both; width:300px; height:200px; border:1px #ddd solid; padding:15px;}
.none{display: none;}


/* --------------------------- js -------------------------------- */
<script>
    window.onload = function(){
        var tabs = document.getElementsByClassName('menu')[0].getElementsByTagName('li'),
        contents = document.getElementsByClassName('content')[0].getElementsByTagName('div');
        //遍历每一个Li = onclick
        (function changeTab(tab) {
            for(var i = 0, len = tabs.length; i < len; i++) {
                tabs[i].onclick = showTab;
            }
        })();
        function showTab() {
            for(var i = 0, len = tabs.length; i < len; i++) {
                if(tabs[i] === this) {
                    tabs[i].className = 'se';
                    contents[i].className = '';
                }else {
                    tabs[i].className = " ";
                    contents[i].className = "none";
                }
            }
        };
    }
</script>