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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JS解析XML实例分析
Jan 30 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
浅谈React之状态(State)
Sep 19 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 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服务器实现多session并发运行
2006/10/09 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php绘制一条直线的方法
2015/01/24 PHP
JavaScript事件列表解说
2006/12/22 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
this关键字的含义
2015/04/08 面试题
网上卖盒饭创业计划书
2014/01/26 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
工程负责人任命书
2014/06/06 职场文书
2014年建筑工作总结
2014/11/26 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL