资讯专栏INFORMATION COLUMN

用JavaScript来实现Tab点击切换

3403771864 / 435人阅读

  现在很多都用到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;
  }

  js

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


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

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

相关文章

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

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

    xushaojieaaa 评论0 收藏0
  • React实现点击切换的标签页

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

    codeKK 评论0 收藏0
  • 每日 30 秒 ⏱ 扼住焦点的喉咙

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

    antyiwei 评论0 收藏0
  • JavaScript 基础知识 - DOM篇(一)

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

    cuieney 评论0 收藏0
  • 纯css实现Tab切换

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

    hizengzeng 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<