选项卡切换效果（一）

一、基于URL地址的锚链出发锚点定位实现选项卡切换效果

缺点：
1.容器高度固定
2.会出发窗体的重新得（页面可以滚动）
效果图：

image.png

image.png

image.png

测试代码：

    
    
    
    
    



    

        
1
        
2
        
3
    
    1
    2
    3

二、基于”focus“的锚点定位实现选项卡切换效果

• 注意：一定注意input的样式设置以及隐藏，否则效果不会如期显示
  效果图：

  
  
  image.png
  
  
  image.png
  
  
  image.png
  
  

  代码

    
    
    
    
    



    

        
1
        
2
        
3
    
    1
    2
    3