html梯形选项卡,css 梯形tab标签页
现在越来越时尚化,tab标签页已经不像原来的那么传统格式化了,现在给大家实现一个简约美观的tab标签页
比较简约的梯形tab
Document
.nav{
display: flex;
width: 300px;
align-items: flex-end;
}
.nav .item{
flex: 1;
height: 40px;
background: #eee;
border-radius: 5px 5px 0 0;
position: relative;
list-style: none;
}
.nav .item.active{
height: 45px;
background: orange;
}
.nav .item:first-child:before{
content: '';
display: none;
width: 10px;
height: 100%;
background: orange;
position: absolute;
right: -5px;
top: 0;
z-index: 10;
border-radius: 0 5px 0 0;
transform: skew(10deg);
}
.nav .item:first-child.active:before{
display: block;
}
.nav .item:last-child:before{
content: '';
display: none;
width: 10px;
height: 100%;
background: orange;
position: absolute;
left: -5px;
top: 0;
z-index: 10;
border-radius: 5px 0 0 0;
transform: skew(-10deg);
}
.nav .item:last-child.active:before{
display: block;
}
document.querySelector('.nav').addEventListener('click',function(e){
if(e.target.nodeName=='LI'){
var item = document.querySelectorAll('.item');
for(var i = 0; i < item.length; i++){
item[i].className = 'item';
}
e.target.className = 'item active';
}
})
以上就可以实现漂亮tab标签页,不像传统的梯形tab那样,有更好的意见或者建议欢迎留言~
本文章为原创文章,转发请注明出处,谢谢!
标签:tab,梯形,item,nav,5px,display,css,before
来源: https://blog.csdn.net/p_pppxxxxmmm/article/details/106764545
html梯形选项卡,css 梯形tab标签页相关推荐
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程.今天就用js中的类实现一个小的功能,动态添加.删除标签页.emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能. 案例说明 ...
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
- Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
- 微信小程序|Tab标签页
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 问题描述 在使用小 ...
- vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
- 点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作 附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
- Vant Tab标签页
引入 import Vue from 'vue'; import { Tab, Tabs } from 'vant';Vue.use(Tab); Vue.use(Tabs); 代码演示 基础用法 通过 ...
- vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置 业务需求 效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
- vue中tab标签页keep-alive二级路由+删除指定缓存页面
1.实现效果 2.keep-alive 2.1是什么: keep-alive 是 Vue 的内置组件,keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 transiti ...
最新文章
- php alert 乱码
- 我应该避免在Java Swing中使用set(Preferred | Maximum | Minimum)Size方法吗?
- 上白泽慧音(tarjan,图的染色)
- 运营商何时推出无限流量?
- STC单片机 命名规则,最小系统 图示
- linux目录结构和份文件系统
- EPC901安装XP
- kaggle注册没有验证码
- [转载]Windows系统的错误报告保存在哪个文件夹里?
- 最难学的5种编程语言排行
- 源码:三星键盘输入法 安卓开发者福音
- 媒体查询(Media Query)
- web服务器性能测试---服务器性能测试实例
- word2vec模型原理(附python实现代码)
- python 使用xpath获取网页标签内容
- 编程中的匈牙利命名法
- 免费不限速跨平台文件传输神器—文件疯巢
- java实现在线预览功能(支持xlx,word,ppt,dwg等格式转Pdf)
- 独立游戏开发如何入门?
- bzoj3505 / P3166 [CQOI2014]数三角形
热门文章
- CSS - (Cascading Style Sheets) 自学教程
- Java编写五线谱上的音符_在五线谱上怎么写音符
- 快门光圈感光度口诀_摄影:一张图让你明白什么叫光圈、快门、感光度、景深、ISO。...
- 暗黑模式?安卓适配一波
- 网络空间测绘技术在网络安全中的应用
- 橙子君正在维护服务器,橙子VR常见问题有哪些 橙子VR常见问题答案汇总
- app系统后台服务器搭建,云服务器 搭建 app后台
- Chrome浏览器必备插件推荐
- Unity说明文档翻译-Time Manager
- win7 IIS服务发布网站