# 用JavaScript来实现Tab点击切换 > 作者/来源: UCloud 运营管理员 > 发布时间: 2022-10-24T13:40:00.000Z > 分类: 其他 > 标签: Java > 原文链接: http://117.50.162.249:3000/yun/articles/2258 --- # 用JavaScript来实现Tab点击切换 > 来源: https://www.ucloud.cn/yun/128200.html > 作者: 3403771864 > 发布日期: 发布于2022-10-24 21:40 现在很多都用到Tab 选项卡切换效果，例如点击切换、滑动切换、延迟切换、自动切换等多种效果，本篇文章讲述的就是通过原生 Jquery 来实现 Tab 点击切换的效果。　　例如： ![](https://ucloud-blog.cn-bj.ufileos.com/articles/128200/images/128200_000.jpg) 　　html ``` 　　　　　　　　111 　　222 　　333 　　444 　　555 　　666 　　　　

　　　　111 　　

　　　　222 　　　　　　333 　　　　　　444 　　　　　　555 　　　　　　666 　　　　　　 ``` 　　css ``` 　*{ 　　padding: 0; 　　margin: 0; 　　} 　　li{ 　　list-style: none; 　　} 　　.gw_b_tab{ 　　color: #333333; 　　width: 240px; 　　height: 490px; 　　background: #FFFFFF; 　　border-radius: 8px; 　　overflow: hidden; 　　overflow-y: hidden; 　　} 　　.gw_b_item{ 　　height: 82px; 　　padding: 0 22px; 　　position: relative; 　　font-size: 16px; 　　line-height: 80px; 　　text-align: center; 　　cursor: pointer; 　　border-radius: 8px; 　　font-weight: bold; 　　white-space: nowrap; 　　} 　　.gw_b_box{ 　　/* display: none; */ 　　width: 880px; 　　position: absolute; 　　right: 0; 　　top: 0; 　　display: none; 　　background: #FB6638; 　　height: 490px; 　　border-radius: 30px; 　　} 　　.gw_b_item2{ 　　background-color: #FB6638; 　　color: #fff; 　　} 　　.gw_box_tit{ 　　height: 48px; 　　line-height: 48px; 　　font-size: 24px; 　　color: #ffffff; 　　margin-bottom: 18px; 　　text-align: center; 　　} ``` 　　js ``` 　　　　 ```