我爱撸码，撸码使我感到快乐！
大家好，我是Counter。
今天就来敲一敲，选项卡，注意哦，不是一般利用js完成的选项卡，今天是纯用HTML和CSS来完成的，这怎么可能？那你不用js的点击事件，怎么处理？注意CSS3的新属性就可以完成啦，利用单选框的选择状态来查找兄弟元素，来改变下面元素的属性，就可以达到目的了。html的结构就不赘述了。
先看看效果：

效果有点丑，功能有就行了，懒得去修饰了，还有更重要的事等着我，好吧，代码给出：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>纯CSS3选项卡</title>
  8.     <style>
  9.         /* 初始化 */
  10.         body, ul, li, a {
  11.             margin: 0;
  12.             padding: 0;
  13.             text-decoration: none;
  14.             list-style: none;
  15.         }
  16.         /* 外面一层容器居中 */
  17.         .wrapper {
  18.             width: 600px;
  19.             margin: 0 auto;
  20.             font-size: 0;
  21.             background-color: #ccc;
  22.         }
  23.         /* 设置导航栏为块级行元素，并将里面的字体垂直居中 */
  24.         .nav .nav-list li {
  25.             display: inline-block;
  26.             width: 200px;
  27.             height: 50px;
  28.             text-align: center;
  29.             line-height: 50px;
  30.             font-size: 20px;
  31.             user-select: none;
  32.         }
  33.         /* 设置主题新闻样式以及字体大小 */
  34.         .news ul {
  35.             display: none;
  36.             padding: 20px;
  37.             font-size: 18px;
  38.             background-color: #f7f7f7;
  39.         }
  40.         /* 将主题新闻里的每条新闻空开来 */
  41.         .news li {
  42.             padding: 10px;
  43.         }
  44.         /* 设置主题新闻的字体颜色 */
  45.         .news li a {
  46.             color: #888;
  47.         }
  48.         /* 最关键的一步，利用表单元素的属性，选中或者未选中，来设置，展示新闻主题是哪块 */
  49.         #hot:checked ~ .news .hot-news,
  50.         #home:checked ~ .news .home-news,
  51.         #international:checked ~ .news .international-news {
  52.             display: block;
  53.         }
  54.         /* 当表单元素被选中时，对应的导航栏背景颜色也跟着变 */
  55.         #hot:checked ~ .nav li:nth-of-type(1),
  56.         #home:checked ~ .nav li:nth-of-type(2),
  57.         #international:checked ~ .nav li:nth-of-type(3)
  58.          {
  59.             background-color: #f7f7f7
  60.         }
  61.         /* 将label标签的设置为行级块元素。同时设置大小，这样点击可点击的范围就变大了 */
  62.         .nav .nav-list label {
  63.             display: inline-block;
  64.             width: 200px;
  65.             height: 50px;
  66.             cursor: pointer;
  67.         }
  68.         /* 将单选框给隐藏掉 */
  69.         .wrapper input {
  70.             display: none;
  71.         }
  72.     </style>
  73. </head>
  74. <body>
  75.     <div class="wrapper">
  76.         <input type="radio" name="tab" id="hot" checked>
  77.         <input type="radio" name="tab" id="home">
  78.         <input type="radio" name="tab" id="international">
  79.         <div class="nav">
  80.             <ul class="nav-list">
  81.                 <li>
  82.                     <label for="hot">热门新闻</label>
  83.                 </li>
  84.                 <li>
  85.                     <label for="home">国内新闻</label>
  86.                 </li>
  87.                 <li>
  88.                     <label for="international">国际新闻</label>
  89.                 </li>
  90.             </ul>
  91.         </div>
  92.         <div class="news">
  93.             <ul class="hot-news">
  94.                 <li>
  95.                     <a href="javascript:;">AAAAAAAAAAA</a>
  96.                 </li>
  97.                 <li>
  98.                     <a href="javascript:;">AAAAAAAAAAA</a>
  99.                 </li>
  100.                 <li>
  101.                     <a href="javascript:;">AAAAAAAAAAA</a>
  102.                 </li>
  103.                 <li>
  104.                     <a href="javascript:;">AAAAAAAAAAA</a>
  105.                 </li>
  106.                 <li>
  107.                     <a href="javascript:;">AAAAAAAAAAA</a>
  108.                 </li>
  109.             </ul>
  110.             <ul class="home-news">
  111.                 <li>
  112.                     <a href="javascript:;">BBBBBBBBBBB</a>
  113.                 </li>
  114.                 <li>
  115.                     <a href="javascript:;">BBBBBBBBBBB</a>
  116.                 </li>
  117.                 <li>
  118.                     <a href="javascript:;">BBBBBBBBBBB</a>
  119.                 </li>
  120.                 <li>
  121.                     <a href="javascript:;">BBBBBBBBBBB</a>
  122.                 </li>
  123.                 <li>
  124.                     <a href="javascript:;">BBBBBBBBBBB</a>
  125.                 </li>
  126.             </ul>
  127.             <ul class="international-news">
  128.                 <li>
  129.                     <a href="javascript:;">CCCCCCCCCCC</a>
  130.                 </li>
  131.                 <li>
  132.                     <a href="javascript:;">CCCCCCCCCCC</a>
  133.                 </li>
  134.                 <li>
  135.                     <a href="javascript:;">CCCCCCCCCCC</a>
  136.                 </li>
  137.                 <li>
  138.                     <a href="javascript:;">CCCCCCCCCCC</a>
  139.                 </li>
  140.                 <li>
  141.                     <a href="javascript:;">CCCCCCCCCCC</a>
  142.                 </li>
  143.             </ul>
  144.         </div>
  145.     </div>
  146. </body>
  147. </html>

纯CSS3完成选项卡，不要js完成的选项卡的更多相关文章

  1. 一款纯css3实现的tab选项卡

    今天给大家带来一款纯css3实现的tab选项卡.单击左侧的选项的时候,右侧内容以动画的形式展示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  2. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 纯CSS3实现动态火车行驶特效

    上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

  4. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  5. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  6. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  7. 纯CSS3大转盘抽奖（响应式、可配置）

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  8. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  9. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

随机推荐

  1. [Day21]异常

    1.异常-Java代码在运行时期发生的问题,在Java中,把异常信息封装成了一个类.当出现了问题时,就会创建异常类对象并抛出异常相关的信息 1.1 异常的继承体系 Throwable:它是所有错误与异 ...

  2. react-router@4.0 使用和源码解析

    如果你已经是一个正在开发中的react应用,想要引入更好的管理路由功能.那么,react-router是你最好的选择~react-router版本现今已经到4.0.0了,而上一个稳定版本还是2.8.1 ...

  3. linux查看所有用户信息

    所有的用户信息在根目录/etc/中passwd文件内,而passwd的所有权限是root用户及root组用户,所有想要查看所有用户,需要root用户登录系统. root用户登录后,可以直接用查看命令c ...

  4. Typescript基础

    参数类型新特性: ​类型声明 变量/函数:类型(string.any.number.boolean.void五种基本类型) 例如:var age:number=19; function test(na ...

  5. linux安装elk

    环境: centOS7 JDK8 Elasticsearch-6.6.1 Logstash-6.6.1 Kibana-6.6.1 准备: jdk下载地址:https://www.oracle.com/ ...

  6. 使用STS创建springboot项目pom.xml文件报错org.apache.maven.archiver.MavenArchiver.getManifest

    首先我的STS版本时:3.7.3 解决办法:->help->Install New Software -> add->location ->输入: http://repo ...

  7. Freemaker Replace函数的正则表达式运用

    replace(param1,param2,param3) param1 正则表达式:param2 将匹配的字符替换成指定字符:param3 模式 param3 参数如下  模式  i   r   m ...

  8. mysql表类型导致的 setRollbackOnly() 事务不回滚

    在SpringBoot 中,使用事务非常简单,只需在方法上面加入 @Transactional  注解就可以实现.也可加在类上,此时则类中所有方法都支持事务. 而当我使用下面代码时,发现事务却没有回滚 ...

  9. vi命令插入

    1.插入 i :在当前光标前插入 I:在当前行的行首插入 a:在当前光标后插入 A:在当前行的行尾插入 o:在当前行的下面另起一行插入 O:在当前行的上面另起一行插入 s:删除当前光标的字符并开始插入 ...

  10. 使用jEnv在Mac/Linux环境配置多版本Java

    jEnv 是什么? 先来看一下官方介绍 jEnv is a command line tool to help you forget how to set the JAVA_HOME environm ...