源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 5893|回复: 0

[CSS/Html] 纯css实现tab导航的切换,非常实用

[复制链接]

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
272470
发表于 2022-4-18 22:27:16 | 显示全部楼层 |阅读模式
实现了一个纯css的导航功能,闲话不多讲,直接看图:

701047-20190320113916626-341926098.png

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. .tab li {
  14.     float: left;
  15. }

  16. .tab li a {
  17.     text-decoration: none;/*text-decoration 添加到文本的装饰效果*/
  18.     color: #000;
  19.     background: #ddd;
  20.     display: inline-block;
  21.     width: 120px;
  22.     height: 40px;
  23.     text-align: center;
  24.     line-height: 40px;
  25. }

  26. #contain1,
  27. #contain2 {
  28.     display: none;
  29.     width:240px;
  30.     height:100px;
  31.     border:1px solid #ddd;
  32.     position: absolute;
  33.     top:40px;
  34.     padding:10px;
  35.     box-sizing: border-box;/*box-sizing 允许您以确切的方式定义适应某个区域的具体内容。*/
  36. }
  37. /*关键部分*//*:target 是 CSS3 新增的一个伪类,可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #,就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。*/
  38. #contain1:target,
  39. #contain2:target {
  40.     display: block;
  41. }
  42. /*触发变色*//*兄弟选择符 ~*//*E~F{ cssRules } ,CSS3 兄弟选择符(E~F) ,选择 E 元素后面的所有兄弟元素 F*//*E~F 只能选择 E 元素 之后 的 F 元素,所以顺序就显得很重要了*//*CSS3 :nth-child() 选择器*//*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。*//*n 可以是数字、关键词或公式。*/
  43. #contain1:target ~ .tab li:nth-child(1) a{
  44.     background:skyblue;
  45.     color:#fff;
  46. }
  47. #contain2:target ~ .tab li:nth-child(2) a{
  48.     background:skyblue;
  49.     color:#fff;
  50. }
复制代码
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-28 14:33 , Processed in 0.031385 second(s), 19 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明