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

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

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>纯CSS3选项卡</title>

    <style>

        /* 初始化 */

        body, ul, li, a {

            margin: 0;

            padding: 0;

            text-decoration: none;

            list-style: none;

        }

        /* 外面一层容器居中 */

        .wrapper {

            width: 600px;

            margin: 0 auto;

            font-size: 0;

            background-color: #ccc;

        }

        /* 设置导航栏为块级行元素，并将里面的字体垂直居中 */

        .nav .nav-list li {

            display: inline-block;

            width: 200px;

            height: 50px;

            text-align: center;

            line-height: 50px;

            font-size: 20px;

            user-select: none;

        }

        /* 设置主题新闻样式以及字体大小 */

        .news ul {

            display: none;

            padding: 20px;

            font-size: 18px;

            background-color: #f7f7f7;

        }

        /* 将主题新闻里的每条新闻空开来 */

        .news li {

            padding: 10px;

        }

        /* 设置主题新闻的字体颜色 */

        .news li a {

            color: #888;

        }

        /* 最关键的一步，利用表单元素的属性，选中或者未选中，来设置，展示新闻主题是哪块 */

        #hot:checked ~ .news .hot-news,

        #home:checked ~ .news .home-news,

        #international:checked ~ .news .international-news {

            display: block;

        }

        /* 当表单元素被选中时，对应的导航栏背景颜色也跟着变 */

        #hot:checked ~ .nav li:nth-of-type(1),

        #home:checked ~ .nav li:nth-of-type(2),

        #international:checked ~ .nav li:nth-of-type(3)

         {

            background-color: #f7f7f7

        }

        /* 将label标签的设置为行级块元素。同时设置大小，这样点击可点击的范围就变大了 */

        .nav .nav-list label {

            display: inline-block;

            width: 200px;

            height: 50px;

            cursor: pointer;

        }

        /* 将单选框给隐藏掉 */

        .wrapper input {

            display: none;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <input type="radio" name="tab" id="hot" checked>

        <input type="radio" name="tab" id="home">

        <input type="radio" name="tab" id="international">

        <div class="nav">

            <ul class="nav-list">

                <li>

                    <label for="hot">热门新闻</label>

                </li>

                <li>

                    <label for="home">国内新闻</label>

                </li>

                <li>

                    <label for="international">国际新闻</label>

                </li>

            </ul>

        </div>

        <div class="news">

            <ul class="hot-news">

                <li>

                    <a href="javascript:;">AAAAAAAAAAA</a>

                </li>

                <li>

                    <a href="javascript:;">AAAAAAAAAAA</a>

                </li>

                <li>

                    <a href="javascript:;">AAAAAAAAAAA</a>

                </li>

                <li>

                    <a href="javascript:;">AAAAAAAAAAA</a>

                </li>

                <li>

                    <a href="javascript:;">AAAAAAAAAAA</a>

                </li>

            </ul>

            <ul class="home-news">

                <li>

                    <a href="javascript:;">BBBBBBBBBBB</a>

                </li>

                <li>

                    <a href="javascript:;">BBBBBBBBBBB</a>

                </li>

                <li>

                    <a href="javascript:;">BBBBBBBBBBB</a>

                </li>

                <li>

                    <a href="javascript:;">BBBBBBBBBBB</a>

                </li>

                <li>

                    <a href="javascript:;">BBBBBBBBBBB</a>

                </li>

            </ul>

            <ul class="international-news">

                <li>

                    <a href="javascript:;">CCCCCCCCCCC</a>

                </li>

                <li>

                    <a href="javascript:;">CCCCCCCCCCC</a>

                </li>

                <li>

                    <a href="javascript:;">CCCCCCCCCCC</a>

                </li>

                <li>

                    <a href="javascript:;">CCCCCCCCCCC</a>

                </li>

                <li>

                    <a href="javascript:;">CCCCCCCCCCC</a>

                </li>

            </ul>

        </div>

    </div>

</body>

</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. ldap/sldap

    给新建的账户赋权限也是通过修改配置文件/etc/openldap/slapd.conf来实现,具体的增加的内容如下: 如上面示例中就定义了两个用户,一个是只读用户cn=bbs,dc=361way,dc ...

  2. 【大数据和云计算技术社区】分库分表技术演进&最佳实践笔记

    1.需求背景 移动互联网时代,海量的用户每天产生海量的数量,这些海量数据远不是一张表能Hold住的.比如 用户表:支付宝8亿,微信10亿.CITIC对公140万,对私8700万. 订单表:美团每天几千 ...

  3. hisi35xx串口驱动的完善

    鉴于hisi的uart3还没有打通,ls /dev/ | grep ttyA* ,看到的只有ttyAMA0 和ttyAMA1,且使用应用程序打开ttyAMA1设备后,使用write函数,发送,示波器观 ...

  4. win10配置java环境变量，解决javac不是内部或外部命令等问题

    win10配置java环境变量,解决javac不是内部或外部命令等问题 https://www.cnblogs.com/qianji/p/6402690.html

  5. git reset与git revert的区别

    http://alpha-blog.wanglianghome.org/2010/07/30/git-partial-rollback/ reset(版本撤回) 格式 git reset [-q] [ ...

  6. [elk]验证mapping字段数和数据字段数关系

    验证一个mapping下字段缺少或者超过 结论: 没有什么不可以. 1.如果数据字段不在mapping里,则动态会更新mapping. 2.数据字段数也可以小于mapping里字段数 创建一个mapp ...

  7. 【QT】qt python install pip

    https://pip.pypa.io/en/stable/installing/ http://www.runoob.com/w3cnote/python-pip-install-usage.htm ...

  8. 20175211 2018-2019-2 《Java程序设计》第五周学习总结

    目录 教材学习内容总结 第六章 接口与实现 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考试错题总结 学习进度条 参考资料 教材学习内容总结 第六章 接口与实现 6.1 接口 ...

  9. 一小时上手Java 8新特性

    一小时上手Java 8新特性 本文摘译自 https://www.journaldev.com/2389/java-8-features-with-examples,并做了适当增补. Iterable ...

  10. vue中遇到的问题：Error: Cannot find module 'chalk'

    安装 npm install chalk 如果还缺其他很多模块,那就 npm install 暴力解决问题