5-16 导航(标签形tab导航)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

导航(标签形tab导航)

标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。

标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名,如:

<ul class="nav nav-tabs">
     <li><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

运行的效果如下所示:

实现原理非常的简单,将菜单项(li)按块显示,并且让他们在同一水平上排列,然后定义非高亮菜单的样式和鼠标悬浮效果。代码如下:

/*源码请查阅bootstrap.css文件第3494行~第3509行*/

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下,选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class="active"”即可:

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
    …
</ul>

运行效果如下:

对应样式代码如下:

/*源码请查阅bootstrap.css文件第3510行~第3518行*/

.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class="disabled"”即可:

<ul class="nav nav-tabs">
     <li class="active"><a href="##">Home</a></li>
     …
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

运行效果如下:

实现这个效果的样式,在默认样式“.nav”中就带有:

/*源码请查看bootstrap.css文件第3469行~第3478行*/

.nav>li.disabled> a {
  color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
  color: #999;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

注意:我们看到的选项卡效果,点击菜单项就可以切换内容,如果要实现这样的效果需要配合js插件,这部分将在后面的教程中会介绍。

任务

我来试试:完成下面任务

编写代码实现“选项卡导航”,效果图如下:

备注:这一小节没有正确性验证,请查看结果窗口,从而判断输入代码是否正确。

 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>标签形(tab)导航</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <ul class="nav nav-tabs">
  11. <li><a href="##">Home</a></li>
  12. <li><a href="##">CSS3</a></li>
  13. <li><a href="##">Sass</a></li>
  14. <li><a href="##">jQuery</a></li>
  15. <li><a href="##">Responsive</a></li>
  16. </ul>
  17. <br />
  18. <ul class="nav nav-tabs">
  19. <li class="active"><a href="##">Home</a></li>
  20. <li><a href="##">CSS3</a></li>
  21. <li><a href="##">Sass</a></li>
  22. <li><a href="##">jQuery</a></li>
  23. <li><a href="##">Responsive</a></li>
  24. </ul>
  25. <br />
  26. <ul class="nav nav-tabs">
  27. <li class="active"><a href="##">Home</a></li>
  28. <li><a href="##">CSS3</a></li>
  29. <li><a href="##">Sass</a></li>
  30. <li><a href="##">jQuery</a></li>
  31. <li class="disabled"><a href="##">Responsive</a></li>
  32. </ul>
  33. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  34. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  35. </body>
  36. </html>
  1. body{margin:30px;padding:30px;}
下一节