纯css实现tab导航的切换,非常实用

洪七公

实现了一个纯css的导航功能，闲话不多讲，直接看图：



Html代码：

1. <div class="main">
   
2.     <div id="contain1">列表一内容</div>
   
3.     <div id="contain2">列表二内容</div>
   
4.     <ul class="tab">
   
5.         <li><a href="#contain1">列表一</a></li>
   
6.         <li><a href="#contain2">列表二</a></li>
   
7.     </ul>
   
8. </div>

复制代码

Css代码：

1. .main{
   
2.     position: absolute;
   
3.     left: 50%;
   
4.     top:30%;
   
5.     transform: translate(-50%,-50%); /*translate(x,y) 定义 2D 转换。*/
   
6. }
   
7. .tab {
   
8.     margin: 0;
   
9.     padding: 0;
   
10.     overflow: hidden;/*overflow 规定当内容溢出元素框时发生的事情。*/
    
11.     list-style-type: none;/*list-style-type 设置列表项标记的类型*/
    
12. }
    
13. 
    
14. .tab li {
    
15.     float: left;
    
16. }
    
17. 
    
18. .tab li a {
    
19.     text-decoration: none;/*text-decoration 添加到文本的装饰效果*/
    
20.     color: #000;
    
21.     background: #ddd;
    
22.     display: inline-block;
    
23.     width: 120px;
    
24.     height: 40px;
    
25.     text-align: center;
    
26.     line-height: 40px;
    
27. }
    
28. 
    
29. #contain1,
    
30. #contain2 {
    
31.     display: none;
    
32.     width:240px;
    
33.     height:100px;
    
34.     border:1px solid #ddd;
    
35.     position: absolute;
    
36.     top:40px;
    
37.     padding:10px;
    
38.     box-sizing: border-box;/*box-sizing 允许您以确切的方式定义适应某个区域的具体内容。*/
    
39. }
    
40. /*关键部分*//*:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。*/
    
41. #contain1:target,
    
42. #contain2:target {
    
43.     display: block;
    
44. }
    
45. /*触发变色*//*兄弟选择符 ~*//*E~F{ cssRules } ，CSS3 兄弟选择符(E~F) ，选择 E 元素后面的所有兄弟元素 F*//*E~F 只能选择 E 元素 之后 的 F 元素，所以顺序就显得很重要了*//*CSS3 :nth-child() 选择器*//*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*//*n 可以是数字、关键词或公式。*/
    
46. #contain1:target ~ .tab li:nth-child(1) a{
    
47.     background:skyblue;
    
48.     color:#fff;
    
49. }
    
50. #contain2:target ~ .tab li:nth-child(2) a{
    
51.     background:skyblue;
    
52.     color:#fff;
    
53. }

复制代码