选项卡——点击导航位置，下面部分内容改变

                        

如上图所示，点击对应的导航，下面部分内容改变，具体参见以下代码：

HTML部分代码如下：

    
    
    



    

        

            

                Q币
            
            

                话费
            
            

                游戏币
            
            

                新闻
            
            

                其他
            
        
    


    

        

            
请选择您所要充值的金额：
			
10元
			
20元
			
30元
			
40元
			
50元
			
60元
			
70元
			
80元
			
90元
			
100元
        
        

            
请选择您所要充值的金额：
			
10元
			
30元
			
50元
			
100元
        
        

            
请选择您要充值的类型：
			
黄钻
			
红钻
			
紫钻
			
蓝钻
			
粉钻
			
绿钻
			
QQ会员
        
        

			
请选择您要查看的新闻类型：
			
时政
			
国内
			
国际
			
时事
			
社会
			
军事
			
娱乐
			
财经
			
校园
			
中考
			
高考
        
        

            
这里是其他
        
    

CSS部分代码如下：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#main{
    width: 300px;
    border: 1px solid #eee;
    margin: 10px;
    overflow: hidden;
}
#title{
    height: 30px;
    background-color: darkgrey;
    position: relative;
}
#title ul{
    width: 302px;
    left: -1px;
    position: absolute;
}
#title li{
    float: left;
    width: 60px;
    line-height: 30px;
    text-align: center;
    background:#F7F7F7;
    border-bottom:1px solid #eee;
}
#title li.select{
	background:#FFF;
    border-bottom-color:#FFF;
    border-left:1px solid #eee;
    border-right:1px solid #eee;
    padding:0;
    font-weight:bolder;}

#title li a:link,#title li a:visited{
    text-decoration:none;
    color:#000;
}
.center {
    line-height: 30px;
    display: none;
}
.center:first-child{
    display: block;
}
.center div{
	float:left;
	width:20%;
	height:25px;
	border:1px solid gray;
	border-radius:3px;
	margin-left:10px;
	margin-top:10px;
	text-align:center;
	line-height:25px;
	cursor:pointer;
	
}

js部分代码如下：

var title=document.getElementsByClassName("titles")
var center=document.getElementsByClassName("center");
window.οnlοad=function(){
    init()
}
function init(){

}
for(var i=0;i