小编最近在做项目的时候前端需要tab标签来进行角色分类，小编的公司用的是angular，虽然一般情况下angular挺好用的，但是这次例外了，angular的标签并不能良好的达到我想要的效果，于是小编找了一个html改装的tab，如下：

html内容如下

<div class="tabs"><div class="tab-2"><label for="tab2-1">一</label><input id="tab2-1" name="tabs-two" type="radio" checked="checked"><div><h4>第一个标签页</h4><p></p></div></div><div class="tab-2"><label for="tab2-2">二</label><input id="tab2-2" name="tabs-two" type="radio"><div><h4>第二个标签页</h4><p></p></div></div>
</div>

css样式内容如下

.tabs {display: block;display: -webkit-flex;display: -moz-flex;display: flex;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;flex-wrap: wrap;margin: 0;overflow: hidden; }.tabs [class^="tab"] label,.tabs [class*=" tab"] label {
/*     color: black; */cursor: pointer;display: block;font-size: 1.1em;font-weight: 300;line-height: 1em;padding: 2rem 0;text-align: center; }.tabs [class^="tab"] [type="radio"],.tabs [class*=" tab"] [type="radio"] {
/*     border-bottom: 1px solid rgba(239, 237, 239, 0.5); */cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;display: block;width: 100%;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; }.tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,.tabs [class*=" tab"] [type="radio"]:hover,.tabs [class*=" tab"] [type="radio"]:focus {
/*    tab标签选中的颜色标志      */border-bottom: 1px solid #40a9ff;
}.tabs [class^="tab"] [type="radio"]:checked,.tabs [class*=" tab"] [type="radio"]:checked {border-bottom: 2px solid #40a9ff;
}.tabs [class^="tab"] [type="radio"]:checked + div,.tabs [class*=" tab"] [type="radio"]:checked + div {opacity: 1; }.tabs [class^="tab"] [type="radio"] + div,.tabs [class*=" tab"] [type="radio"] + div {display: block;opacity: 0;padding: 2rem 0;width: 90%;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; }.tabs .tab-2 {width: 50%; }.tabs .tab-2 [type="radio"] + div {width: 200%;margin-left: 200%; }.tabs .tab-2 [type="radio"]:checked + div {margin-left: 0; }.tabs .tab-2:last-child [type="radio"] + div {margin-left: 100%; }.tabs .tab-2:last-child [type="radio"]:checked + div {margin-left: -100%; }

鼠标交互事件封装在了css中，其中hover代表鼠标挪到标签页上方，focus代表当前选中的标签，checked表示标签点击（样式），点击触发的事件需重新定义click事件。在这里checked不能用来进行其他的事件触发了，具体业务处理逻辑根据项目业务具体实现。

效果图如下，解决了angular的tab不能让标签内的文字居中的问题。

总结

其实原生的，基本的东西也挺好的，哈哈哈哈哈

博主原文：https://blog.csdn.net/yjt13/article/details/85041125

HTML：tab页签相关推荐

如何动态为 tabstrip 中的 tab 页签指定标题
网上居然搜不到相关的文章,所以我来写一篇吧. 其实就是两个要点,只要注意就行了. 首先,最重要的一点,在绘制屏幕的时候,给 tab 页签的属性指定为"输出字段",这时,它的&quo ...
Bootstrap tab页签刷新加载不显示，只有点击其他标签后第一个才显示
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示解决方法: 在tab-content里面的tab-pane中添加active  < ...
Axure 9 实战案例，母版的应用 2，运用母版交互绘制Tab页签
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 上一篇教程我们讲解了运用母版绘制微信APP的导航菜单(点击阅读该教程>>),本篇教程我们继续来 ...
利用vuex关闭当前tab页签
在vuex的js文件中写如下方法:(如果没有vuex的js文件,可以自己写一个,参考另外一篇文章,讲解vuex的) /*** @class closeNow* @description 关闭当前界面页 ...
浏览器tab页签上的title图标favicon.icon
文章目录浏览器tab页签上的title图标favicon.icon 什么是favicon? 如何查看favicon 在线生成favicon 浏览器tab页签上的title图标如何设置浏览器tab页 ...
Vue头部菜单,点击菜单新增tab页签
Vue头部菜单,点击菜单新增tab页签 <template> <div class="wrapper"> < ...
UltraEdit 设置 tab页签显示
http://blog.itpub.net/22664653/viewspace-704576/ 不小心将ue编辑器设置成了移动窗口,当有多个页面的时候,切换很麻烦,想要将UltraEdit设置为t ...
antd-pro v5版本的tab页签最简实践
antd-pro v5版本的tab页签最简实践前言网上找了很多资料,也看了好些个代码,总觉得他们写的太累赘了.其实官方自己也说了,antdpro做页签和他们的产品理念不符合才不做,但是不代表他们没 ...
tab页签切换----bootstrap
2019独角兽企业重金招聘Python工程师标准>>> 关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class=&quo ...

HTML：tab页签

html内容如下

css样式内容如下

总结

HTML：tab页签相关推荐

最新文章

热门文章