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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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时间戳使用实例代码
2008/06/07 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
ext jquery 简单比较
2010/04/07 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue全屏事件开发详解
2020/06/17 Javascript
python中列表的切片与修改知识点总结
2019/07/23 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
PyQt 如何创建自定义QWidget
2021/03/24 Python
医药营销专业个人自荐信
2013/09/29 职场文书
毕业晚会主持词
2014/03/24 职场文书
班级文化标语
2014/06/23 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
人生遥控器观后感
2015/06/11 职场文书
父亲节感言
2015/08/03 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Python实现简单的猜单词
2021/06/15 Python
浅析Django接口版本控制
2021/06/26 Python
java多态注意项小结
2021/10/16 Java/Android