html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)

一、在一个页面(不跨页面)

效果:

html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)_第1张图片

html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)_第2张图片

代码 



    
        
    
    
        
标签页1
标签页2
标签页3

标签页1内容

这是标签页1的内容。

标签页2内容

这是标签页2的内容。

标签页3内容

这是标签页3的内容。

 二、Tab标签,跨页面效果

效果

html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)_第3张图片

 代码

首页



  
    
  
  
    

 page1.html



    
        
        
        
        页面1
    
    
        页面1
    

 三、 Tab标签实现页面顶部标签栏

效果

html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)_第4张图片

 

html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)_第5张图片

 代码



  
    
  
  
    
    

你可能感兴趣的:(前端,html,css,前端)