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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
js实现购物车功能
Jun 12 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
vue实现顶部菜单栏
Nov 08 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript去掉空格的方法集合
2010/12/28 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python书单 不将就
2017/07/11 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
房地产活动策划方案
2014/05/14 职场文书
运动会班级口号
2014/06/09 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
JavaScript的function函数详细介绍
2021/11/20 Javascript