js和jquery实现tab状态栏切换效果 js和jquery实现tab状态栏切换效果

今天做一个简单的小案例，用js和jquery分别去实现点击tab栏，实现切换的目的，效果如下图：

文章图片

代码如下：

状态栏切换 - 锐客网* {margin: 0; padding: 0; box-sizing: border-box; } .main {width: 720px; display: block; margin: 50px auto; } .table-title {width: 100%; height: 100%; border: 1px solid black; } .table-title ul {list-style: none; display: flex; } .table-title li {width: 25%; height: 100%; background-color: gainsboro; text-align: center; border-right: 1px solid black; cursor: pointer; } .table-title li:last-child {border-right: none; } .table-title li label {text-align: center; cursor: pointer; } .tab-box .tab-show {display: none; border: 1px solid black; border-top: none; text-align: center; } /* 让第一个框显示出来 */.tab-box .tab-show:first-Child {display: block; } .change {opacity: 0.7; }
手机数码
电脑办公
生活用品
居家必备
手机数码电脑办公生活用品居家必备

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
【js和jquery实现tab状态栏切换效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。