用JavaScript来实现Tab点击切换

3403771864 发布于2022-10-24 21:40 / 754人阅读

　　现在很多都用到Tab 选项卡切换效果，例如点击切换、滑动切换、延迟切换、自动切换等多种效果，本篇文章讲述的就是通过原生 Jquery 来实现 Tab 点击切换的效果。

　　例如：

　　html

　　<body>
　　<div style="position: relative;margin-top: 56px;display: flex;justify-content: space-between;width: 1200px;" id="left">
　　<ul class="gw_b_tab">
　　<li class="gw_b_item gw_b_item2">111</li>
　　<li class="gw_b_item">222</li>
　　<li class="gw_b_item">333</li>
　　<li class="gw_b_item">444</li>
　　<li class="gw_b_item">555</li>
　　<li class="gw_b_item">666</li>
　　</ul>
　　<div>
　　<div class="gw_b_box" style="display: block;">
　　<h3 class="gw_box_tit">111</h3>
　　</div>
　　<div class="gw_b_box" >
　　<h3 class="gw_box_tit">222</h3>
　　</div>
　　<div class="gw_b_box">
　　<h3 class="gw_box_tit">333</h3>
　　</div>
　　<div class="gw_b_box" >
　　<h3 class="gw_box_tit">444</h3>
　　</div>
　　<div class="gw_b_box">
　　<h3 class="gw_box_tit">555</h3>
　　</div>
　　<div class="gw_b_box" >
　　<h3 class="gw_box_tit">666</h3>
　　</div>
　　</div>
　　</div>

　　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;
　　}

　　<script src="/static/js/jquery-1.11.3.min.js"></script>
　　<script>
　　$(function () {
　　$("#left .gw_b_item").click(function () {
　　var index = $(this).index();
　　$(".gw_b_box").eq(index).show();
　　$(this).addClass('gw_b_item2')
　　// :eq() 选择器选取带有指定 index 值的元素。
　　$(".gw_b_box").eq(index).siblings().hide();
　　$(this).siblings().removeClass('gw_b_item2')
　　})
　　})
　　</script>

GPU云服务器云服务器 js实现tab切换 javascript_tab切换 javascript实现tab tab切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128200.html

用React实现点击切换的标签页

摘要：四总结上面一系列的操作最终的结果都需要用来反应出来，所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何实现既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。 ...

xushaojieaaa 2019-08-22 10:59 评论0 收藏0
用React实现点击切换的标签页

摘要：四总结上面一系列的操作最终的结果都需要用来反应出来，所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何实现既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。 ...

codeKK 2019-08-01 15:00 评论0 收藏0
每日 30 秒 ⏱ 扼住焦点的喉咙

简介无障碍、HTML 小细节、焦点、a11y、Accessibility、框架选择无障碍开发还是应该从 HTML 开始聊起，无论是盲人阅读器还是浏览器等工具最核心的部分还是在 HTML，毕竟没了 CSS 只是不美观了，没了 JavaScript 只是少了交互和无限扩展的可能性。有的同学会说了产品和老板拿着鞭子在后头赶马车哪里有时间写这些。现实是这样的，但是在选择UI框架的时候可以选择无障碍...

antyiwei 2019-08-23 16:54 评论0 收藏0
JavaScript 基础知识 - DOM篇(一)

摘要：前言本篇文章是基础知识的篇，如果前面的基础知识入门篇看完了，现在就可以学习了。基本概念分为三个部分。在这个基础上使用一些新特性，高级浏览器支持，低级浏览器不支持。在对象中的属性是一个布尔值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言本篇文章是JavaS...

cuieney 2019-08-22 13:40 评论0 收藏0
用纯css实现Tab切换

摘要：所以当我们思考能否用来实现时还应考虑到的结构，能不能构造出满足已存在的选择器的布局。用来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来，真正做一个组件该做的事，希望越来越好我们今天用css来实现一个常见的tab切换效果查看原文可以有更好的排版效果哦先看效果 https://codepen.io/xboxyan/pe... 前言哪些简单的效果可以考虑用css来实现呢，目前...

hizengzeng 2019-08-30 15:54 评论0 收藏0