前端js——tab选项卡切换模板、例子（点击标签显示对应内容）

效果

1.页面布局

分别设置五个标签，给五个标签写序号，移到标签上获取标签序号显示对应的div
1）设置一个整个的div包含所有的标签和所有内容
2）标签

        

			
快餐
			
面食
			
甜点
		

3）内容

2.页面样式

1）设置整个tab的大小边框

#tab{
				width: 400px;
				height: 300px;
				border: blue 1px solid;
				margin: 30px auto;
			}

2）标签浮动\清除标签原点

#tab ul li{
				float: left;
				width: 133px;
				height: 30px;
				list-style: none;
				text-align: center;
				line-height: 30px;
			}

3）设置内容部分,加绝对定位避免出现三个内容框，设置内容部分隐藏

.main{
				width: 390px;
				height: 250px;
				margin-left: 5px;
				margin-top: 40px;
				display: none;
				position: absolute;
			}

3.给标签加移入事件，实现tab切换

1）获取id进行 定义
2）利用循环给li分别加序号

for(var i=0;i

3）鼠标移入事件：获取li的序号，显示对应序号的div

list[i].onmouseover=function(){
                    var c=this.xuhao;
                    cn[c].style.display="block"
            	}

4)保证tab可以循环使用,每执行一次都先让其他都隐藏在显示对应的

for(var i=0;i<3;i++){
                    	cn[i].style.display="none";
                    }

4.源码

	
		
		
		
	
	
		

		
		

			
快餐
			
面食
			
甜点