摘要:切换一直是页面之中主要的结构,最近在写的项目,想到可不可以不用和做控制,实现纯和的切换。页面交换的原理无非是利用标签的属性在显示与否之间的切换。再之后利用的的选择器就可以关联上要切换的页面了。这里直接利用了绝对定位的方法。
tab切换一直是页面之中主要的结构,最近在写vue的spa项目,想到可不可以不用href和js做控制,实现纯css和html的tab切换。
tab页面交换的原理无非是利用标签的display属性在显示与否之间的切换。
而利用这点后,我们的input之中的单选按钮就要派上用场了。
首先通过设置input和相应的label来作为tab的导航。
</>复制代码
再之后利用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代码
</>复制代码
- 第一页tab
- 第二页tab
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111927.html
摘要:先上效果图正如标题所说,本文是教你如何巧用伪类制作下拉菜单,原生,无。实际例子其实就是主题的右上角那个按钮,你点一下就会有一个下拉菜单出现,在其他区域点击返回原状。为了让下拉菜单更显下拉的情况,采用的定位下转换原点。 原文链接:http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...
摘要:以上就是状态模式在实际开发中得应用,我们结合了综合应用状态模式。 在vue.js之类的mvvm的框架大行其道的当下,开发中最常见的场景就是通过改变数据来展示页面或模块的不同状态,当我们把mvvm玩的不亦乐乎的时候,有时也会停下了想想:在某些项目中不能用vuejs之类的框架时,我们怎么通过改变数据来修改页面或者模块的状态呢。嗯。说到状态,就想到了状态模式 状态模式: 在很多情况下,一个对...
摘要:以上就是状态模式在实际开发中得应用,我们结合了综合应用状态模式。 在vue.js之类的mvvm的框架大行其道的当下,开发中最常见的场景就是通过改变数据来展示页面或模块的不同状态,当我们把mvvm玩的不亦乐乎的时候,有时也会停下了想想:在某些项目中不能用vuejs之类的框架时,我们怎么通过改变数据来修改页面或者模块的状态呢。嗯。说到状态,就想到了状态模式 状态模式: 在很多情况下,一个对...
摘要:自己实践写一个基于的插件面向对象的写法这里我就不写和了,主要就是分析插件代码代码我上传到上了,如果你们想看结构及样式的话,可以去把源码下来看看地址地址目录结构以及基本结构搭建首先搭建一个插件的框架里调用构造函数配置默认参数及参数获取然后我们 自己实践写一个基于jquery的tab插件,面向对象的写法这里我就不写index.html,和index.css了,主要就是分析插件代码tab.j...
阅读 2105·2021-11-18 10:02
阅读 2858·2021-09-04 16:41
阅读 1147·2019-08-30 15:55
阅读 1412·2019-08-29 17:27
阅读 1078·2019-08-29 17:12
阅读 2537·2019-08-29 15:38
阅读 2860·2019-08-29 13:02
阅读 2834·2019-08-29 12:29
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要