js实现tab栏切换效果


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下

效果展示:

js实现tab栏切换效果

源码展示:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>js实现tab栏切换</title>
 <style>
 * {
  margin: 0;
  margin: 0;
  padding: 0;
  list-style: none;
 }
 
 .nav {
  width: 100%;
  height: 50px;
 }
 
 .nav ul {
  width: 600px;
  height: 50px;
  margin: 0 auto;
 }
 
 .nav ul li {
  width: 120px;
  height: 50px;
  font-weight: 800;
  font-size: 18px;
  color: #515151;
  line-height: 50px;
  text-align: center;
  float: left;
  cursor: pointer;
 }
 
 .tiao {
  width: 600px;
  height: 5px;
  background-color: #515151;
  margin: 0 auto;
  position: relative;
  top: 0;
  left: 0;
 }
 
 .zhou {
  width: 120px;
  height: 5px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
 }
 
 .ww {
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: rgba(250, 0, 255, 0) rgba(250, 0, 255, 0) red rgba(250, 0, 255, 0);
  position: absolute;
  top: -16px;
  left: 56px;
 }
 
 .nei {
  width: 600px;
  height: 300px;
  margin: 0 auto;
 }
 
 .nei li {
  width: 600px;
  height: 300px;
  color: #fff;
  font-family: "微软雅黑";
  font-size: 40px;
  text-align: center;
  line-height: 300px;
  display: none;
  margin-top: 10px;
 }
 </style>
</head>
<body>
<div class="nav">
 <ul>
 <li onmouseover="don(0)">大娃</li>
 <li onmouseover="don(1)">二娃</li>
 <li onmouseover="don(2)">三娃</li>
 <li onmouseover="don(3)">四娃</li>
 <li onmouseover="don(4)">五娃</li>
 
 </ul>
</div>
 
<div class="tiao">
 <div id="zhou" class="zhou" style="left: 0;">
 <div class="ww"></div>
 </div>
</div>
 
<div id="nei" class="nei">
 <ul>
 <li style="background-color:#e4007f; display: block;">大娃出世</li>
 <li style="background-color:#687de8">二娃出世</li>
 <li style="background-color:#2fb936">三娃出世</li>
 <li style="background-color:#4dd5d0">四娃出世</li>
 <li style="background-color:#e24759">五娃出世</li>
 </ul>
</div>
 
<script>
 var k;
 var kk = 0;
 
 function don(gh) {
 if (kk == 0) {
  kk = 1
  var w1 = document.getElementById('zhou')
  var t = parseInt(w1.style.left)
 
  if (t < gh * 120) {
  k = window.setInterval(
   function () {
   goright(gh * 120)
   }, 30
  )
  } else if (t > gh * 120) {
  k = window.setInterval(
   function () {
   goleft(gh * 120)
   }, 30
  )
  } else {
  kk = 0
  }
  var w2 = document.getElementById('nei').getElementsByTagName('li')
  for (var i = 0; i < w2.length; i++) {
  w2[i].style.display = "none"
  }
  w2[gh].style.display = "block"
 }
 }
 
 //右移动
 function goright(gh1) {
 var w1 = document.getElementById('zhou')
 var t = parseInt(w1.style.left)
 t += 20
 
 if (t >= gh1) {
  t = gh1
  window.clearInterval(k)
  kk = 0
 }
 w1.style.left = t + "px"
 }
 
 //左移动
 function goleft(gh1) {
 var w1 = document.getElementById('zhou')
 var t = parseInt(w1.style.left)
 t -= 20
 //alert(t)
 if (t <= gh1) {
  t = gh1
  window.clearInterval(k)
  kk = 0
 }
 w1.style.left = t + "px"
 }
</script>
<hr>
<pre style="color:red">
 感: 最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客
 
          --王
</pre>
 
</body>
</html>

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 #Javascript
原生js+canvas实现下雪效果
Aug 02 #Javascript
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
JavaScript实现动态生成表格
Aug 02 #Javascript
javascript实现京东登录显示隐藏密码
Aug 02 #Javascript
Vue scoped及deep使用方法解析
Aug 01 #Javascript
You might like
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
python书籍信息爬虫实例
2018/03/19 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python添加菜单图文讲解
2019/06/04 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
给客户的道歉信
2014/01/13 职场文书
大学秋游活动方案
2014/02/11 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers