tab切换

这是style样式

html,body{
            width: 100%;
            height: 100%;
        }
        *{
            padding: 0;
            margin: 0;
        }
        ul {
            overflow:hidden;
            list-style-type:none;
        }
        #uls{
            width: 300px;
            height: 30px;
            margin: 0 auto;
        }
        #uls li{
            width: 98px;
            height: 30px;
            margin-left: 0px;
            text-align: center;
            line-height: 30px;
            float: left;
            background: #ffffff;
            border: 1px solid #bbb;
            list-style: none;
        }
        .lis{
            background: gold;
            color: red;
        }
        #divs{
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            margin: 0 auto;
            border: 1px solid #f2f2f2;
        }
        #divs div{
            width: 280px;
            height: 280px;
            position: absolute;
            /*display: none;*/
            opacity: 0;
        }
        #divs div.ddd{
            position: absolute;
            /*display: block;*/
            opacity: 1;
            background-color:#ccc;
        }

这是body代码

<ul id="uls">
        <li class="lis">left</li>
	<li>center</li>
	<li>right</li>
</ul>
<div id="divs">
	<div class="ddd">111</div>
	<div>222</div>
	<div>333</div>
</div>

这是js代码（给了一个页面加载事件）

<script type="text/javascript">
	window.onload=function(){
		var uls=document.getElementById("uls").getElementsByTagName("li");
		var divs=document.getElementById("divs").getElementsByTagName("div");
		for(var i=0;i<uls.length;i++){
			uls[i].onclick=function(){
				change(this);
			}
		}
		function change(obj){
			for(var i=0;i<uls.length;i++){
				if(uls[i]==obj){
					uls[i].className="lis";
					divs[i].className="ddd";
				}else{
					uls[i].className="";
					divs[i].className="";
				}
			}
		}
	}