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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
js实现简单的秒表
Jan 16 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python删除列表内容
2015/08/04 Python
Python实现Linux中的du命令
2017/06/12 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
思想汇报格式
2014/01/05 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
社区两委对照检查材料
2014/08/23 职场文书
八一建军节演讲稿
2014/09/10 职场文书
不同意离婚上诉状
2015/05/23 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
frg-100简单操作(设置)说明
2022/04/05 无线电
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python