layui选项卡效果实现代码

layui选项卡效果实现代码

本文实例为大家分享了layui选项卡的具体代码，供大家参考，具体内容如下

默认风格的Tab

1. 高度默认自适应，也可以随意固宽。

2. Tab进行了响应式处理，所以无需担心数量多少。

动态操作Tab

新增Tab项

删除：商品管理

切换到：用户管理

Hash地址定位

点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项

简洁风格的Tab

卡片风格的Tab

当Tab数超过一定宽度

1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。

2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。

带删除功能的Tab

1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例

2. 删除功能适用于所有风格

效果图：

官网Tab

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。