CSS实现导航条Tab切换的三种方法

前面的话

  导航条tab在页面中非常常见，本文说详细介绍css实现导航条tab的三种方法

布局

  根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局

【语义布局】

立即学习“前端免费学习笔记（深入）”；

  从语义布局的角度来看，每一个导航标题和其对应的导航内容应该是一个整体

    

        

            
课程
            
课程内容
        
        

            
学习计划
            
学习计划内容
        
        

            
技能图谱
            
技能图谱内容
        
    
   

【视觉布局】

  从视觉布局的角度来看，所有导航标题为一组，所有导航内容为一组

    
    

        
课程内容
        
学习计划内容
        
技能图谱内容
    

hover

  导航条的功能就是点击导航标题时，显示对应的导航内容。如果使用伪类hover实现类似效果，使用第一种布局方式语义布局比较合适

  由于在语义布局中，三个导航内容是处于重叠的状态。移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面

    

        

            
课程
            
课程内容
        
        

            
学习计划
            
学习计划内容
        
        

            
技能图谱
            
技能图谱内容
        
    
   

  [缺点]：初始状态时，第一个导航标题无法实现默认被选中的状态(背景白色，无下划线)；鼠标移出导航模块时，导航内容部分无法固定，显示第一个导航内容；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

锚点

  实现导航条的关键就在于如何建立导航标题与导航内容之间的联系，而锚点就可以实现类似效果。通过点击锚点，页面生成一个哈希值，然后跳转到相应内容的位置

  使用锚点技术时，使用语义布局和视觉布局都可以实现

【1】使用语义布局

  使用语义布局时，可以使用伪类target，通过target选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将导航标题的HTML结构移到导航内容的下面

  点击导航标题时，触发target伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

    

        

            
课程内容
            课程
        
        

            
学习计划内容
            学习计划
        
        

            
技能图谱内容
            技能图谱
        
    
   

  [缺点]：初始态默认选中的导航标题样式无法设置；改变了HTML结构；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动

【2】使用视觉布局

  在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容

装修公司企业网站源码2.0

装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。

下载

  点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果

  使用伪类hover来实现改变当前导航标题样式的效果

    
    

        
课程内容
        
学习计划内容
        
技能图谱内容
    

  [缺点]：初始态默认选中的导航标题样式无法设置；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

label

  上面使用锚点技术来联系导航标题和导航内容，而label也可以实现类似的效果。label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上

  使用label时，使用语义布局和视觉布局都可以实现

【1】使用语义布局

  使用语义布局时，使用label标签来显示导航标题，且需要配合使用单选按钮。使用伪类checked，通过checked选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将单选按钮放在每个.navI元素里的最上层，然后设置display:none，接下来是表示导航标题，最后是

  点击导航标题时，触发checked伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

    

        

            
            课程            
            
课程内容
        
        

            
            学习计划            
            
学习计划内容
        
        

            
            技能图谱            
            
技能图谱内容
        
    
   

  [缺点]：HTML结构较复杂

【2】使用视觉布局

  在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容

  点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果

  使用伪类hover来实现改变当前导航标题样式的效果

  [缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

最后

  上面的三种方法中，实现效果最好的是使用label标签配合radio类型的input标签，通过:checked选择器来实现

  在实际应用中，使用javascript的方式来控制导航条Tab的情况更为普遍

更多CSS实现导航条Tab切换的三种方法 相关文章请关注PHP中文网！