4.6.1　选项卡导航

选项卡导航是最常用的一种导航方式，尤其是在多内容编辑的时候，需要通过选项卡进行分组显示，其效果如图4-29所示。

4.6.1　选项卡导航 - 图1 图4-29　选项卡运行效果

上述效果的第一个菜单“主页”是当前高亮菜单项（.active样式），“作品”菜单项是禁用状态（.disabled样式）。实现方式如下：

  1. <ul class="nav nav-tabs ">
  2.     <li class="active"><a href="#">主页</a></li>
  3.     <li><a href="#">个人信息</a></li>
  4.     <li class="disabled"><a href="#">作品</a></li>
  5.     <li><a href="#">图书</a></li>
  6. </ul>

其实现原理主要是让每个li项按照块级元素显示，然后定义非高亮菜单的样式和鼠标触发行为，最后定义高亮菜单项的样式和鼠标行为。代码如下：

  1. // 源码3501行
  2. .nav-tabs {
  3.   border-bottom: 1px solid #ddd;        /* 所有菜单下都有横线，代表整体导航为水平方向 */
  4. }
  5. .nav-tabs > li {
  6.   float: left;                  /* 所有菜单都左浮动 */
  7.   margin-bottom: -1px;
  8. }
  9. .nav-tabs > li > a {
  10.   margin-right: 2px;
  11.   line-height: 1.428571429;
  12.   border: 1px solid transparent;        /* 透明边框 */
  13.   border-radius: 4px 4px 0 0;   /* 每个菜单项上面都有圆角 */
  14. }
  15. .nav-tabs > li > a:hover {
  16.   border-color: #eee #eee #ddd; /* 非高亮状态下，菜单项在鼠标触发时候的背景颜色 */
  17. }
  18. .nav-tabs > li.active > a,
  19. .nav-tabs > li.active > a:hover,
  20. .nav-tabs > li.active > a:focus {
  21.   color: #555;
  22.   cursor: default;
  23.   background-color: #fff;       /* 高亮状态下，背景颜色固定为白色 */
  24.   border: 1px solid #ddd;
  25.   border-bottom-color: transparent;     /* 高亮菜单项下的横线设置为透明，即不显示横线 */
  26. }

注意，如果需要处理单击菜单，以便立即显示所对应tab的内容区的话，需要配合JS组件里的Tab组件。