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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
使用js实现数据格式化
Dec 03 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 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如何得到当前页和上一页的地址?
2006/11/27 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php HTML无刷新提交表单
2016/04/05 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Python FTP操作类代码分享
2014/05/13 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python构建图像分类识别器的方法
2019/01/12 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
基于Python测试程序是否有错误
2020/05/16 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
请说出以下代码输出什么
2013/08/30 面试题
《郑和远航》教学反思
2014/04/16 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js