巧用css实现无js的tab切换

Darkgel 发布于2019-08-05 11:08 / 2769人阅读

摘要：切换一直是页面之中主要的结构，最近在写的项目，想到可不可以不用和做控制，实现纯和的切换。页面交换的原理无非是利用标签的属性在显示与否之间的切换。再之后利用的的选择器就可以关联上要切换的页面了。这里直接利用了绝对定位的方法。

tab切换一直是页面之中主要的结构，最近在写vue的spa项目，想到可不可以不用href和js做控制，实现纯css和html的tab切换。

tab页面交换的原理无非是利用标签的display属性在显示与否之间的切换。
而利用这点后，我们的input之中的单选按钮就要派上用场了。
首先通过设置input和相应的label来作为tab的导航。


tab1

再之后利用input的checked的选择器就可以关联上要切换的页面了。
当然我们需要把对应的主体内容标签跟在label标签后，利用兄弟选择器控制它的display属性。
为了让几个页面处于同一位置，我们当然也要统一他们的位置。
这里直接利用了绝对定位的方法。
完成的css代码如下

    input[type="radio"]{
        display: none;
    }
    .tab label{
        display: block;
        cursor: pointer;
        position: absolute;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #eee;
    }
    .label-1{
        left: 0;
        top: 0;
    }
    .label-2{
        left: 60px;
        top: 0;
    }
    input[type="radio"]:checked~div[class^="mod"]{
        display: block;
    }
    input[type="radio"]:checked~label{
        background: orange;
    }
    [class^="mod"]{
        position: absolute;
        top: 40px;
        left: 20px;
        display: none;
    }

html代码

超融合服务器混合云 js实现tab切换巧用CSS的MASK滤镜 js选项卡tab切换 js_tab切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56181.html

巧用css实现无js的tab切换

摘要：切换一直是页面之中主要的结构，最近在写的项目，想到可不可以不用和做控制，实现纯和的切换。页面交换的原理无非是利用标签的属性在显示与否之间的切换。再之后利用的的选择器就可以关联上要切换的页面了。这里直接利用了绝对定位的方法。 tab切换一直是页面之中主要的结构，最近在写vue的spa项目，想到可不可以不用href和js做控制，实现纯css和html的tab切换。 tab页面交换的原理无...

DevTTL 2019-08-29 12:29 评论0 收藏0
巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

摘要：先上效果图正如标题所说，本文是教你如何巧用伪类制作下拉菜单，原生，无。实际例子其实就是主题的右上角那个按钮，你点一下就会有一个下拉菜单出现，在其他区域点击返回原状。为了让下拉菜单更显下拉的情况，采用的定位下转换原点。原文链接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...

littleGrow 2019-08-01 14:47 评论0 收藏0
设计模式---状态模式在web前端中的应用

摘要：以上就是状态模式在实际开发中得应用，我们结合了综合应用状态模式。在vue.js之类的mvvm的框架大行其道的当下，开发中最常见的场景就是通过改变数据来展示页面或模块的不同状态，当我们把mvvm玩的不亦乐乎的时候，有时也会停下了想想：在某些项目中不能用vuejs之类的框架时，我们怎么通过改变数据来修改页面或者模块的状态呢。嗯。说到状态，就想到了状态模式状态模式: 在很多情况下，一个对...

刘东 2019-08-21 10:56 评论0 收藏0
设计模式---状态模式在web前端中的应用

摘要：以上就是状态模式在实际开发中得应用，我们结合了综合应用状态模式。在vue.js之类的mvvm的框架大行其道的当下，开发中最常见的场景就是通过改变数据来展示页面或模块的不同状态，当我们把mvvm玩的不亦乐乎的时候，有时也会停下了想想：在某些项目中不能用vuejs之类的框架时，我们怎么通过改变数据来修改页面或者模块的状态呢。嗯。说到状态，就想到了状态模式状态模式: 在很多情况下，一个对...

silvertheo 2019-08-01 15:29 评论0 收藏0
动手写一个jquery插件(实践)

摘要：自己实践写一个基于的插件面向对象的写法这里我就不写和了，主要就是分析插件代码代码我上传到上了，如果你们想看结构及样式的话，可以去把源码下来看看地址地址目录结构以及基本结构搭建首先搭建一个插件的框架里调用构造函数配置默认参数及参数获取然后我们自己实践写一个基于jquery的tab插件,面向对象的写法这里我就不写index.html,和index.css了，主要就是分析插件代码tab.j...

Kylin_Mountain 2019-08-22 18:10 评论0 收藏0