CSS实现tab页切换效果

说明

tab也切换在前端页面中是非常常见的一种效果。本人通过搜集资料大致实现有有下面三种写法。

利用:hover选择器
- 缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果
利用a标签的锚点 + :target选择器
- 缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。
利用label和radio的绑定关系和radio选中时的:checked来实现效果

radio控件和label控件绑定

只要指定label的"for"属性到radio的id就行，或者用label标签包围住radio。

第一种方式:

<input type="radio" id="radio-first" name="radio1" /><label for="radio-first">这是radio-first</label>
<input type="radio" id="radio-second" name="radio1" /><label for="radio-second">这是radio-second</label>

第二种方式:

<label><input type="radio"  name="radio2">这是radioA</label>
<label><input type="radio"  name="radio2">这是radioB</label>

下面利用第三种方式实现tab效果

css样式

<style>/* 清样式，如果是项目中，不推荐使用通配符来清样式，建议使用标签清样式，通配符清样式会增加页面压力 */*{margin:0;padding:0;}/* 宽度为屏宽的一半，高度为屏高的一半，然后居中 */.box{width:50vw;height:50vh;margin:0 auto;}/* 清除li样式 */ul,li{list-style: none;}/* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 *//* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */ul{position:relative;display:flex;}/* 将三个li宽度平分，高度60px */li{flex:1;height:60px;}/* input隐藏 */input{display:none;}/* 设置input的下一个节点label的样式 */input+label{display:block;width:100%;height:100%;background:#ccc;font-size:18px;text-align: center;line-height: 60px;color:#333;}/* 设置div内容的基础样式 隐藏内容div*/input+label+div{display:none;position: absolute;left:0;top:60px;}/* input选中状态时候对应的label的样式 */input:checked+label{background: #333333;color:#fff;}/* input选中时候显示对应的div */input:checked+label+div{display:block;}.tab-box{width: 50vw;height: 300px;background-color: darkred;}</style>

HTML代码

<div class="box"><ul><li><input type="radio" name="check" id="active1" checked><label for="active1">第一页</label><div class="tab-box">1道德三皇五帝，功名夏后商周，五霸七雄闹春秋</div></li><li><input type="radio" name="check" id="active2"><label for="active2">第二页</label><div class="tab-box">2诸恶莫作，众善奉行，远报儿女，近在己身诸恶莫作</div></li><li><input type="radio" name="check" id="active3"><label for="active3">第三页</label><div class="tab-box">3rrererererererere</div></li></ul></div>

执行效果

CSS实现tab页切换效果相关推荐

用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
html图片多tab切换代码,CSS实现Tab页切换实例代码
1.hover 移入其父元素.navI时,触发鼠标的hover态,给父元素添加样式为position:relative;z-index:1;.从而提升了层级z-index.在其子元素导航内容的层级比拼 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
vue2.0 实现tab标签切换效果内容可以自行定义
利用vue2.0 实现tab标签切换效果比较实用初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. ...
Axure交互-选中状态实现登录和注册Tab页切换
Axure交互-选中状态实现登录和注册Tab页切换 1.选中实现注册登录切换场景选中登录和注册两个Tab页签切换,实现注册和登录页面切换. 2.添加元件 2.1.添加按钮和动态面板 2.2.动态面板 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...

CSS实现tab页切换效果

说明

radio控件和label控件绑定

下面利用第三种方式实现tab效果

css样式

HTML代码

执行效果

CSS实现tab页切换效果相关推荐

最新文章

热门文章