不一样的技术，一样的Tab页

不一样的技术，一样的Tab页

前言：
都知道tab页，无非就是点击页面标签可以有选中对应的页面。
但是简简单单的功能或许会给我们带来更多的思考。当然可以使用不同的技术实现，下面就展示三种技术手段实现tab页面
技术是不一样的，但是思路是一样，正如，条条大路通罗马，不管那条路，最后都要通往罗马的。
目前整体的思路是写出所有显示的页面，再根据标签点击显示对应的标签

使用原生JavaScript实现tab的转换

HTML

    

        

            

                
菜单一 
                
菜单二 
                
菜单三 
                
菜单四 
            
        

    

        

            
11111111111111111111
            
11111111111111111111
            
11111111111111111111
            
11111111111111111111
            
11111111111111111111
        
    
    

        

            
222222222222222222222
            
222222222222222222222
            
222222222222222222222
            
222222222222222222222
            
222222222222222222222
        
    
    

        

            
333333333333333333
            
333333333333333333
            
333333333333333333
            
333333333333333333
            
333333333333333333
        
    
    

        

            
44444444444444444444
            
44444444444444444444
            
222222222222222222222
            
222222222222222222222
            
222222222222222222222
        
    
    

JS

window.onload=function(){
//获取nav标签数组
var nav=document.getElementById("nav-list").getElementsByTagName("li");  
//获取显示页标签数组
var con=document.getElementById("con").getElementsByTagName("div");
//给每一个nav标签赋初始值，点击添加事件，
      for(i=0;i

CSS

.icon .nav{ height:30px;}
.nav li{ display:inline-block; width:100px; height:30px;line-height:30px; float:left; cursor:pointer; text-align:center;background:#ddd;}
.nav li.active{color:#fff;background:#f60}
.con{ display:none; padding-top:10px;}

思路：

1. 总体的想法就是，不点击时默认的是所有display设置为none，在需要显示的页面上，手动添加为block，这样就为默认样式了。
2. 当点击标签时，获取到标签值，找到相应的标签页，添加block，添加class

js实现的原理也是其他技术实现的原理

使用angularJS 实现tab标签页

前言：
angular 的精髓是在双向绑定，那也就可以使用双向绑定的特点来实现tab标签。

HTML

  
    

        

            设置
            
节点信息
            
链接
            
背景信息
            
背景图片
        
    

    
    

      

        
1
      
      

        
222
      
      

        
333
      
      

        
4444
      
    

标签上设置选中后的class 如果为true就显示为选中状态，其次是添加一个函数，点击后显示对应的标签页，
标签页，使用的是ng-show显示。

angularJS

var self = this;

            //起始选中页
            self.content = 1;
            //设置选中的tab
            self.setContent = function(tab){
                self.content = tab;
                self.active = true;

            };
            //显示对应的tab 返回的是布尔值
          
            self.isSet = function(tab){
                return self.content == tab;
            };

果然还是angular最为简单，只不过不易维护

思路：为每个标签页设置一个函数，函数的参数已经给出，根据参数，来判断标签页的显示和标签的显示。较为合理。代码简单粗暴。

总结： 其实tab页的技术虽说不一样，但是整体的思路都是一样的，首先是默认的样式，点击后显示对应的页面和选中样式，去掉未选中的样式。也可以使用移除元素的做法，也可以试试的