原码笔记

原码笔记

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

小诸哥 0

前面的话

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

布局

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

【语义布局】

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

  1. <style>
  2. body,p{margin: 0;}
  3. h2{margin: 0;font-size:100%;}
  4. ul{margin: 0;padding: 0;list-style: none;}
  5. a{text-decoration: none;color:inherit;}
  6. .box{width: 572px;border: 1px solid #999;overflow: hidden;}
  7. .nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
  8. .navI{float: left;width: 33.333%;box-sizing: border-box;}
  9. .navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
  10. .navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
  11. .ml1{margin-left: -100%;}
  12. .ml2{margin-left: -200%;}
  13. .navI_active{position:relative;z-index:1;}
  14. </style>
  15.  
  16. <div class="box">
  17.      <ul class="nav">
  18.          <li class="navI navI_active">
  19.              <h2 class="navI-tit">课程</h2>
  20.              <p class="navI-txt">课程内容</p>
  21.          </li>
  22.          <li class="navI">
  23.              <h2 class="navI-tit">学习计划</h2>
  24.              <p class="navI-txt ml1">学习计划内容</p>
  25. </li>
  26.          <li class="navI">
  27.              <h2 class="navI-tit">技能图谱</h2>
  28.              <p class="navI-txt ml2">技能图谱内容</p>
  29.          </li>
  30.      </ul>
  31. </div>
  32.  

【视觉布局】

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

  1. <style>
  2. body,p{margin: 0;}
  3. ul{margin: 0;padding: 0;list-style: none;}
  4. a{text-decoration: none;color: inherit;}
  5. .box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
  6. .nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
  7. .nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
  8. .nav-txt{height: 200px;text-indent: 2em; line-height: 2;}
  9. .nav-txtI{height: 200px;}
  10. </style>
  11.  
  12. <div class="box">
  13.      <nav class="nav-tit">
  14.          <a class="nav-titI">课程</a>
  15.          <a class="nav-titI">学习计划</a>
  16.          <a class="nav-titI">技能图谱</a>
  17.      </nav>
  18.      <ul class="nav-txt">
  19.          <li class="nav-txtI nav-txtI_active">课程内容</li>
  20.          <li class="nav-txtI">学习计划内容</li>
  21.          <li class="nav-txtI">技能图谱内容</li>
  22.      </ul>
  23. </div>
  24.  

hover

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

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

  1. &lt;style>
  2. body,p{margin: 0;}
  3. h2{margin: 0;font-size:100%;}
  4. ul{margin: 0;padding: 0;list-style: none;}
  5. a{text-decoration: none;color:inherit;}
  6. .box{width: 572px;border: 1px solid #999;overflow: hidden;}
  7. .nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
  8. .navI{float: left;width: 33.333%;box-sizing: border-box;}
  9. .navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
  10. .navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
  11. .ml1{margin-left: -100%;}
  12. .ml2{margin-left: -200%;}
  13. .navI_active{position:relative;z-index:1;}
  14. /*重点代码*/
  15. .navI:hover{position:relative;z-index:1;}
  16. .navI:hover .navI-tit{background:#fff;border-bottom:none;}
  17. </style>
  18.  
  19. <div class="box">
  20.      <ul class="nav">
  21.          <li class="navI navI_active">
  22.              <h2 class="navI-tit">课程</h2>
  23.              <p class="navI-txt">课程内容</p>
  24.          </li>
  25.          <li class="navI">
  26.              <h2 class="navI-tit">学习计划</h2>
  27.              <p class="navI-txt ml1">学习计划内容</p>
  28.          </li>
  29.          <li class="navI">
  30.              <h2 class="navI-tit">技能图谱</h2>
  31.              <p class="navI-txt ml2">技能图谱内容</p>
  32.          </li>
  33.      </ul>
  34. </div>
  35.  

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

 锚点

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

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

【1】使用语义布局

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

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

  1. <style>
  2. body,p{margin: 0;}
  3. h2{margin: 0;font-size:100%;}
  4. ul{margin: 0;padding: 0;list-style: none;}
  5. a{text-decoration: none;color:inherit;}
  6. .box{width: 572px;border: 1px solid #999;overflow: hidden;}
  7. .nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
  8. .navI{float: left;width: 33.333%;box-sizing: border-box;position:relative;}
  9. .navI-tit{
  10.                  position:absolute;
  11.                  top:0;left:0;
  12.                  right:0;
  13.                  box-sizing: border-box;
  14.                  line-height: 40px;
  15.                  height: 40px;
  16.                  text-align: center;
  17.                  cursor: pointer;
  18.                  border-left: 1px solid #cecece;
  19.                  border-bottom: 1px solid #cecece;
  20.              }
  21. .navI-txt{width: 572px;height:200px;margin-top: 40px;text-indent:2em;line-height: 2;background:#fff;}
  22. .ml1{margin-left: -100%;}
  23. .ml2{margin-left: -200%;}
  24. .navI_active{z-index:1;}
  25. /*重点代码*/
  26. .navI-txt:target{position:relative;z-index:1;}
  27. .navI-txt:target ~ .navI-tit{background:#fff;border-bottom:none;}
  28. </style>
  29.  
  30. <div class="box">
  31.      <ul class="nav">
  32.          <li class="navI navI_active">
  33.              <p class="navI-txt" id="kc">课程内容</p>
  34.              <a class="navI-tit" href="#kc">课程</a>
  35.          </li>
  36.          <li class="navI">
  37.              <p class="navI-txt ml1" id="xx">学习计划内容</p>
  38.              <a class="navI-tit" href="#xx">学习计划</a>
  39.          </li>
  40.          <li class="navI">
  41.              <p class="navI-txt ml2" id="jn">技能图谱内容</p>
  42.              <a class="navI-tit" href="#jn">技能图谱</a>
  43.          </li>
  44.      </ul>
  45. </div>
  46.  

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

【2】使用视觉布局

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

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

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

  1. <style>
  2. body,p{margin: 0;}
  3. ul{margin: 0;padding: 0;list-style: none;}
  4. a{text-decoration: none;color: inherit;}
  5. .box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
  6. .nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
  7. .nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
  8. .nav-txt{height: 200px;text-indent: 2em; line-height: 2;}
  9. .nav-txtI{height: 200px;}
  10. /*重点内容*/
  11. .nav-txt{overflow: hidden;}
  12. .nav-titI:hover{background-color: white;border-bottom: none;}
  13. </style>
  14.  
  15. <div class="box">
  16.      <nav class="nav-tit">
  17.          <a class="nav-titI" href="#kc">课程</a>
  18.          <a class="nav-titI" href="#xx">学习计划</a>
  19.          <a class="nav-titI" href="#jn">技能图谱</a>
  20.      </nav>
  21.      <ul class="nav-txt">
  22.          <li class="nav-txtI nav-txtI_active" id="kc">课程内容</li>
  23.          <li class="nav-txtI" id="xx">学习计划内容</li>
  24.          <li class="nav-txtI" id="jn">技能图谱内容</li>
  25.      </ul>
  26. </div>
  27.  

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

label

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

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

【1】使用语义布局

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

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

  1. <style>
  2. body,p{margin: 0;}
  3. h2{margin: 0;font-size:100%;}
  4. ul{margin: 0;padding: 0;list-style: none;}
  5. input{margin: 0;width: 0;}
  6. a{text-decoration: none;color:inherit;}
  7. .box{width: 572px;border: 1px solid #999;overflow: hidden;}
  8. .nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
  9. .navI{float: left;width: 33.333%;box-sizing: border-box;}
  10. .navI-tit{display:block;line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
  11. .navI-txt{position:relative;width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
  12. .ml1{margin-left: -100%;}
  13. .ml2{margin-left: -200%;}
  14. /*重点代码*/
  15. .navI-radio{display:none;}
  16. .navI-radio:checked + .navI-tit{background:#fff;border-bottom:none;}
  17. .navI-radio:checked ~ .navI-txt{z-index:1;}
  18. </style>
  19.  
  20. <div class="box">
  21.      <ul class="nav">
  22.          <li class="navI">
  23.              <input class="navI-radio" name="nav" type="radio" id="kc" checked>
  24.              <label class="navI-tit" for="kc">课程</label>
  25.              <p class="navI-txt">课程内容</p>
  26.          </li>
  27.          <li class="navI">
  28.              <input class="navI-radio" name="nav" type="radio" id="xx">
  29.              <label class="navI-tit" for="xx">学习计划</label>
  30.              <p class="navI-txt ml1">学习计划内容</p>
  31.          </li>
  32.          <li class="navI">
  33.              <input class="navI-radio" name="nav" type="radio" id="jn">
  34.              <label class="navI-tit" for="jn">技能图谱</label>
  35.              <p class="navI-txt ml2">技能图谱内容</p>
  36.          </li>
  37.      </ul>
  38. </div>
  39.  

[缺点]：HTML结构较复杂

【2】使用视觉布局

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

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

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

  1. <style>
  2. body,p{margin: 0;}
  3. ul{margin: 0;padding: 0;list-style: none;}
  4. a{text-decoration: none;color: inherit;}
  5. input{margin: 0;padding: 0;border:none;}
  6. .box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
  7. .nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
  8. .nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
  9. .nav-txt{height: 200px;}
  10. .nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;}
  11. /*重点内容*/
  12. .nav-txt{overflow: hidden;}
  13. .nav-titI:hover{background-color: #fff;border-bottom:none;}
  14. </style>
  15.  
  16. <div class="box">
  17.      <nav class="nav-tit">
  18.          <label class="nav-titI" for="kc">课程</label>
  19.          <label class="nav-titI" for="xx">学习计划</label>
  20.          <label class="nav-titI" for="jn">技能图谱</label>
  21.      </nav>
  22.      <nav class="nav-txt">
  23.          <input class="nav-txtI nav-txtI_active" id="kc" value="课程内容" readonly>
  24.          <input class="nav-txtI" id="xx" value="学习计划内容" readonly>
  25.          <input class="nav-txtI" id="jn" value="技能图谱内容" readonly>
  26.      </nav>
  27. </div>
  28.  

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

 最后

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

标签： 导航条 Tab切换

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇利用CSS实现几款不错的菜单栏实例代码

下一篇常用的清除浮动的方法

相关文章