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

布局方式：

  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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/panda-ling/p/6285646.html