码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-01-14 17:34:12      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:otto   absolute   ima   position   box   ml2   target   har   ext   

布局方式:

  1. 语义布局:
    • 上代码:
        1 <!doctype html>
        2 <html>
        3 
        4     <head>
        5         <meta charset="utf-8">
        6         <title>tab导航</title>
        7     </head>
        8 
        9     <style>
       10         .box {
       11             margin: 300px auto;
       12         }
       13     </style>
       14 
       15     <body>
       16 
       17         <style>
       18             body,
       19             p {
       20                 margin: 0;
       21             }
       22             
       23             h2 {
       24                 margin: 0;
       25                 font-size: 100%;
       26             }
       27             
       28             ul {
       29                 margin: 0;
       30                 padding: 0;
       31                 list-style: none;
       32             }
       33             
       34             a {
       35                 text-decoration: none;
       36                 color: inherit;
       37             }
       38             
       39             .box {
       40                 width: 572px;
       41                 border: 1px solid #999;
       42                 overflow: hidden;
       43             }
       44             
       45             .nav {
       46                 margin-left: -1px;
       47                 font: 14px "微软雅黑";
       48                 overflow: hidden;
       49                 background-color: #f1f1f1;
       50             }
       51             
       52             .navI {
       53                 float: left;
       54                 width: 33.333%;
       55                 box-sizing: border-box;
       56             }
       57             
       58             .navI-tit {
       59                 line-height: 40px;
       60                 text-align: center;
       61                 cursor: pointer;
       62                 border-left: 1px solid #cecece;
       63                 border-bottom: 1px solid #cecece;
       64             }
       65             
       66             .navI-txt {
       67                 width: 572px;
       68                 height: 200px;
       69                 text-indent: 2em;
       70                 line-height: 2;
       71                 background: #fff;
       72             }
       73             
       74             .ml1 {
       75                 margin-left: -100%;
       76             }
       77             
       78             .ml2 {
       79                 margin-left: -200%;
       80             }
       81             
       82             .navI_active {
       83                 position: relative;
       84                 z-index: 1;
       85             }
       86         </style>
       87 
       88         <div class="box">
       89             <ul class="nav">
       90                 <li class="navI navI_active">
       91                     <h2 class="navI-tit">课程</h2>
       92                     <p class="navI-txt">课程内容</p>
       93                 </li>
       94                 <li class="navI">
       95                     <h2 class="navI-tit">学习计划</h2>
       96                     <p class="navI-txt ml1">学习计划内容</p>
       97                 </li>
       98                 <li class="navI">
       99                     <h2 class="navI-tit">技能图谱</h2>
      100                     <p class="navI-txt ml2">技能图谱内容</p>
      101                 </li>
      102             </ul>
      103         </div>
      104 
      105     </body>
      106 
      107 </html>
    • 效果图:技术分享
  2. 视觉布局:
    • 上代码:
       1 <!doctype html>
       2 <html>
       3 
       4     <head>
       5         <meta charset="utf-8">
       6         <title>tab导航</title>
       7     </head>
       8 
       9     <style>
      10         .box {
      11             margin: 300px auto;
      12         }
      13     </style>
      14 
      15     <body>
      16 
      17         <style>
      18             body,
      19             p {
      20                 margin: 0;
      21             }
      22             
      23             ul {
      24                 margin: 0;
      25                 padding: 0;
      26                 list-style: none;
      27             }
      28             
      29             a {
      30                 text-decoration: none;
      31                 color: inherit;
      32             }
      33             
      34             .box {
      35                 width: 572px;
      36                 border: 1px solid #999;
      37                 font: 14px "微软雅黑";
      38                 overflow: hidden;
      39             }
      40             
      41             .nav-tit {
      42                 margin-left: -1px;
      43                 height: 40px;
      44                 line-height: 40px;
      45                 text-align: center;
      46                 background-color: #f1f1f1;
      47                 overflow: hidden;
      48             }
      49             
      50             .nav-titI {
      51                 box-sizing: border-box;
      52                 float: left;
      53                 width: 33.333%;
      54                 border-left: 1px solid #cecece;
      55                 border-bottom: 1px solid #cecece;
      56                 cursor: pointer;
      57             }
      58             
      59             .nav-txt {
      60                 height: 200px;
      61                 text-indent: 2em;
      62                 line-height: 2;
      63             }
      64             
      65             .nav-txtI {
      66                 height: 200px;
      67             }
      68         </style>
      69 
      70         <div class="box">
      71             <nav class="nav-tit">
      72                 <a class="nav-titI">课程</a>
      73                 <a class="nav-titI">学习计划</a>
      74                 <a class="nav-titI">技能图谱</a>
      75             </nav>
      76             <ul class="nav-txt">
      77                 <li class="nav-txtI nav-txtI_active">课程内容</li>
      78                 <li class="nav-txtI">学习计划内容</li>
      79                 <li class="nav-txtI">技能图谱内容</li>
      80             </ul>
      81         </div>
      82 
      83     </body>
      84 
      85 </html>
    • 效果图:技术分享
  1. hover:
    • 上代码:
        1 <!doctype html>
        2 <html>
        3 
        4     <head>
        5         <meta charset="utf-8">
        6         <title>tab导航</title>
        7     </head>
        8 
        9     <style>
       10         .box {
       11             margin: 300px auto;
       12         }
       13     </style>
       14 
       15     <body>
       16 
       17         <style>
       18             body,
       19             p {
       20                 margin: 0;
       21             }
       22             
       23             h2 {
       24                 margin: 0;
       25                 font-size: 100%;
       26             }
       27             
       28             ul {
       29                 margin: 0;
       30                 padding: 0;
       31                 list-style: none;
       32             }
       33             
       34             a {
       35                 text-decoration: none;
       36                 color: inherit;
       37             }
       38             
       39             .box {
       40                 width: 572px;
       41                 border: 1px solid #999;
       42                 overflow: hidden;
       43             }
       44             
       45             .nav {
       46                 margin-left: -1px;
       47                 font: 14px "微软雅黑";
       48                 overflow: hidden;
       49                 background-color: #f1f1f1;
       50             }
       51             
       52             .navI {
       53                 float: left;
       54                 width: 33.333%;
       55                 box-sizing: border-box;
       56             }
       57             
       58             .navI-tit {
       59                 line-height: 40px;
       60                 text-align: center;
       61                 cursor: pointer;
       62                 border-left: 1px solid #cecece;
       63                 border-bottom: 1px solid #cecece;
       64             }
       65             
       66             .navI-txt {
       67                 width: 572px;
       68                 height: 200px;
       69                 text-indent: 2em;
       70                 line-height: 2;
       71                 background: #fff;
       72             }
       73             
       74             .ml1 {
       75                 margin-left: -100%;
       76             }
       77             
       78             .ml2 {
       79                 margin-left: -200%;
       80             }
       81             
       82             .navI_active {
       83                 position: relative;
       84                 z-index: 1;
       85             }
       86             /*重点代码*/
       87             
       88             .navI:hover {
       89                 position: relative;
       90                 z-index: 1;
       91             }
       92             
       93             .navI:hover .navI-tit {
       94                 background: #fff;
       95                 border-bottom: none;
       96             }
       97         </style>
       98 
       99         <div class="box">
      100             <ul class="nav">
      101                 <li class="navI navI_active">
      102                     <h2 class="navI-tit">课程</h2>
      103                     <p class="navI-txt">课程内容</p>
      104                 </li>
      105                 <li class="navI">
      106                     <h2 class="navI-tit">学习计划</h2>
      107                     <p class="navI-txt ml1">学习计划内容</p>
      108                 </li>
      109                 <li class="navI">
      110                     <h2 class="navI-tit">技能图谱</h2>
      111                     <p class="navI-txt ml2">技能图谱内容</p>
      112                 </li>
      113             </ul>
      114         </div>
      115 
      116     </body>
      117 
      118 </html>
  2. 锚点:
    1. 【使用语义布局】上代码:
        1 <!doctype html>
        2 <html>
        3 
        4     <head>
        5         <meta charset="utf-8">
        6         <title>tab导航</title>
        7     </head>
        8 
        9     <style>
       10         .box {
       11             margin: 300px auto;
       12         }
       13     </style>
       14 
       15     <body>
       16 
       17         <style>
       18             body,
       19             p {
       20                 margin: 0;
       21             }
       22             
       23             h2 {
       24                 margin: 0;
       25                 font-size: 100%;
       26             }
       27             
       28             ul {
       29                 margin: 0;
       30                 padding: 0;
       31                 list-style: none;
       32             }
       33             
       34             a {
       35                 text-decoration: none;
       36                 color: inherit;
       37             }
       38             
       39             .box {
       40                 width: 572px;
       41                 border: 1px solid #999;
       42                 overflow: hidden;
       43             }
       44             
       45             .nav {
       46                 margin-left: -1px;
       47                 font: 14px "微软雅黑";
       48                 overflow: hidden;
       49                 background-color: #f1f1f1;
       50             }
       51             
       52             .navI {
       53                 float: left;
       54                 width: 33.333%;
       55                 box-sizing: border-box;
       56                 position: relative;
       57             }
       58             
       59             .navI-tit {
       60                 position: absolute;
       61                 top: 0;
       62                 left: 0;
       63                 right: 0;
       64                 box-sizing: border-box;
       65                 line-height: 40px;
       66                 height: 40px;
       67                 text-align: center;
       68                 cursor: pointer;
       69                 border-left: 1px solid #cecece;
       70                 border-bottom: 1px solid #cecece;
       71             }
       72             
       73             .navI-txt {
       74                 width: 572px;
       75                 height: 200px;
       76                 margin-top: 40px;
       77                 text-indent: 2em;
       78                 line-height: 2;
       79                 background: #fff;
       80             }
       81             
       82             .ml1 {
       83                 margin-left: -100%;
       84             }
       85             
       86             .ml2 {
       87                 margin-left: -200%;
       88             }
       89             
       90             .navI_active {
       91                 z-index: 1;
       92             }
       93             /*重点代码*/
       94             
       95             .navI-txt:target {
       96                 position: relative;
       97                 z-index: 1;
       98             }
       99             
      100             .navI-txt:target~ .navI-tit {
      101                 background: #fff;
      102                 border-bottom: none;
      103             }
      104         </style>
      105 
      106         <div class="box">
      107             <ul class="nav">
      108                 <li class="navI navI_active">
      109                     <p class="navI-txt" id="kc">课程内容</p>
      110                     <a class="navI-tit" href="#kc">课程</a>
      111                 </li>
      112                 <li class="navI">
      113                     <p class="navI-txt ml1" id="xx">学习计划内容</p>
      114                     <a class="navI-tit" href="#xx">学习计划</a>
      115                 </li>
      116                 <li class="navI">
      117                     <p class="navI-txt ml2" id="jn">技能图谱内容</p>
      118                     <a class="navI-tit" href="#jn">技能图谱</a>
      119                 </li>
      120             </ul>
      121         </div>
      122 
      123     </body>
      124 
      125 </html>

    2. 【使用视觉布局】上代码:
       1 <!doctype html>
       2 <html>
       3 
       4     <head>
       5         <meta charset="utf-8">
       6         <title>tab导航</title>
       7     </head>
       8 
       9     <style>
      10         .box {
      11             margin: 300px auto;
      12         }
      13     </style>
      14 
      15     <body>
      16 
      17         <style>
      18             body,
      19             p {
      20                 margin: 0;
      21             }
      22             
      23             ul {
      24                 margin: 0;
      25                 padding: 0;
      26                 list-style: none;
      27             }
      28             
      29             a {
      30                 text-decoration: none;
      31                 color: inherit;
      32             }
      33             
      34             .box {
      35                 width: 572px;
      36                 border: 1px solid #999;
      37                 font: 14px "微软雅黑";
      38                 overflow: hidden;
      39             }
      40             
      41             .nav-tit {
      42                 margin-left: -1px;
      43                 height: 40px;
      44                 line-height: 40px;
      45                 text-align: center;
      46                 background-color: #f1f1f1;
      47                 overflow: hidden;
      48             }
      49             
      50             .nav-titI {
      51                 box-sizing: border-box;
      52                 float: left;
      53                 width: 33.333%;
      54                 border-left: 1px solid #cecece;
      55                 border-bottom: 1px solid #cecece;
      56                 cursor: pointer;
      57             }
      58             
      59             .nav-txt {
      60                 height: 200px;
      61                 text-indent: 2em;
      62                 line-height: 2;
      63             }
      64             
      65             .nav-txtI {
      66                 height: 200px;
      67             }
      68             /*重点内容*/
      69             
      70             .nav-txt {
      71                 overflow: hidden;
      72             }
      73             
      74             .nav-titI:hover {
      75                 background-color: white;
      76                 border-bottom: none;
      77             }
      78         </style>
      79 
      80         <div class="box">
      81             <nav class="nav-tit">
      82                 <a class="nav-titI" href="#kc">课程</a>
      83                 <a class="nav-titI" href="#xx">学习计划</a>
      84                 <a class="nav-titI" href="#jn">技能图谱</a>
      85             </nav>
      86             <ul class="nav-txt">
      87                 <li class="nav-txtI nav-txtI_active" id="kc">课程内容</li>
      88                 <li class="nav-txtI" id="xx">学习计划内容</li>
      89                 <li class="nav-txtI" id="jn">技能图谱内容</li>
      90             </ul>
      91         </div>
      92 
      93     </body>
      94 
      95 </html>
  3. label:
    1. 【使用语义布局】上代码:
        1 <!doctype html>
        2 <html>
        3 
        4     <head>
        5         <meta charset="utf-8">
        6         <title>tab导航</title>
        7     </head>
        8 
        9     <style>
       10         .box {
       11             margin: 300px auto;
       12         }
       13     </style>
       14 
       15     <body>
       16 
       17         <style>
       18             body,
       19             p {
       20                 margin: 0;
       21             }
       22             
       23             h2 {
       24                 margin: 0;
       25                 font-size: 100%;
       26             }
       27             
       28             ul {
       29                 margin: 0;
       30                 padding: 0;
       31                 list-style: none;
       32             }
       33             
       34             input {
       35                 margin: 0;
       36                 width: 0;
       37             }
       38             
       39             a {
       40                 text-decoration: none;
       41                 color: inherit;
       42             }
       43             
       44             .box {
       45                 width: 572px;
       46                 border: 1px solid #999;
       47                 overflow: hidden;
       48             }
       49             
       50             .nav {
       51                 margin-left: -1px;
       52                 font: 14px "微软雅黑";
       53                 overflow: hidden;
       54                 background-color: #f1f1f1;
       55             }
       56             
       57             .navI {
       58                 float: left;
       59                 width: 33.333%;
       60                 box-sizing: border-box;
       61             }
       62             
       63             .navI-tit {
       64                 display: block;
       65                 line-height: 40px;
       66                 text-align: center;
       67                 cursor: pointer;
       68                 border-left: 1px solid #cecece;
       69                 border-bottom: 1px solid #cecece;
       70             }
       71             
       72             .navI-txt {
       73                 position: relative;
       74                 width: 572px;
       75                 height: 200px;
       76                 text-indent: 2em;
       77                 line-height: 2;
       78                 background: #fff;
       79             }
       80             
       81             .ml1 {
       82                 margin-left: -100%;
       83             }
       84             
       85             .ml2 {
       86                 margin-left: -200%;
       87             }
       88             /*重点代码*/
       89             
       90             .navI-radio {
       91                 display: none;
       92             }
       93             
       94             .navI-radio:checked+ .navI-tit {
       95                 background: #fff;
       96                 border-bottom: none;
       97             }
       98             
       99             .navI-radio:checked~ .navI-txt {
      100                 z-index: 1;
      101             }
      102         </style>
      103 
      104         <div class="box">
      105             <ul class="nav">
      106                 <li class="navI">
      107                     <input class="navI-radio" name="nav" type="radio" id="kc" checked>
      108                     <label class="navI-tit" for="kc">课程</label>
      109                     <p class="navI-txt">课程内容</p>
      110                 </li>
      111                 <li class="navI">
      112                     <input class="navI-radio" name="nav" type="radio" id="xx">
      113                     <label class="navI-tit" for="xx">学习计划</label>
      114                     <p class="navI-txt ml1">学习计划内容</p>
      115                 </li>
      116                 <li class="navI">
      117                     <input class="navI-radio" name="nav" type="radio" id="jn">
      118                     <label class="navI-tit" for="jn">技能图谱</label>
      119                     <p class="navI-txt ml2">技能图谱内容</p>
      120                 </li>
      121             </ul>
      122         </div>
      123 
      124     </body>
      125 
      126 </html>
    2. 【使用视觉布局】上代码:
        1 <!doctype html>
        2 <html>
        3 
        4     <head>
        5         <meta charset="utf-8">
        6         <title>tab导航</title>
        7     </head>
        8 
        9     <style>
       10         .box {
       11             margin: 300px auto;
       12         }
       13     </style>
       14 
       15     <body>
       16 
       17         <style>
       18             body,
       19             p {
       20                 margin: 0;
       21             }
       22             
       23             ul {
       24                 margin: 0;
       25                 padding: 0;
       26                 list-style: none;
       27             }
       28             
       29             a {
       30                 text-decoration: none;
       31                 color: inherit;
       32             }
       33             
       34             input {
       35                 margin: 0;
       36                 padding: 0;
       37                 border: none;
       38             }
       39             
       40             .box {
       41                 width: 572px;
       42                 border: 1px solid #999;
       43                 font: 14px "微软雅黑";
       44                 overflow: hidden;
       45             }
       46             
       47             .nav-tit {
       48                 margin-left: -1px;
       49                 height: 40px;
       50                 line-height: 40px;
       51                 text-align: center;
       52                 background-color: #f1f1f1;
       53                 overflow: hidden;
       54             }
       55             
       56             .nav-titI {
       57                 box-sizing: border-box;
       58                 float: left;
       59                 width: 33.333%;
       60                 border-left: 1px solid #cecece;
       61                 border-bottom: 1px solid #cecece;
       62                 cursor: pointer;
       63             }
       64             
       65             .nav-txt {
       66                 height: 200px;
       67             }
       68             
       69             .nav-txtI {
       70                 height: 200px;
       71                 display: block;
       72                 width: 100%;
       73                 text-indent: 2em;
       74                 line-height: 2;
       75             }
       76             /*重点内容*/
       77             
       78             .nav-txt {
       79                 overflow: hidden;
       80             }
       81             
       82             .nav-titI:hover {
       83                 background-color: #fff;
       84                 border-bottom: none;
       85             }
       86         </style>
       87 
       88         <div class="box">
       89             <nav class="nav-tit">
       90                 <label class="nav-titI" for="kc">课程</label>
       91                 <label class="nav-titI" for="xx">学习计划</label>
       92                 <label class="nav-titI" for="jn">技能图谱</label>
       93             </nav>
       94             <nav class="nav-txt">
       95                 <input class="nav-txtI nav-txtI_active" id="kc" value="课程内容" readonly>
       96                 <input class="nav-txtI" id="xx" value="学习计划内容" readonly>
       97                 <input class="nav-txtI" id="jn" value="技能图谱内容" readonly>
       98             </nav>
       99         </div>
      100 
      101     </body>
      102 
      103 </html>

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

标签:otto   absolute   ima   position   box   ml2   target   har   ext   

原文地址:http://www.cnblogs.com/panda-ling/p/6285646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!