JavaScript实现简单的tab选项卡切换


Posted in Javascript onJanuary 05, 2016

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码,分享给大家供大家参考,具体内容如下

效果图:

JavaScript实现简单的tab选项卡切换

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table切换</title>
  <style type="text/css">
    *{
      padding: 
    }
    button{
      width: 95px;
    }
    .active {
      background-color: yellow;
    }
    #wrap{
      width:510px;
      overflow: hidden;
      margin:0 auto;
    }
    #inner{
      width:9999px;
      overflow: hidden;
      position: relative;
      left:0;
      transition: left 0.6s;
    }
    #inner a {
      float: left;
    }
    #inner img {
      display: block;
      width:510px;
    }
    #main{
      text-align: center;
    }

  </style>
</head>
<body>
 <div id="wrap">
  <div id="inner">
    <a href="###"><img src="img/1.jpg"></a>
    <a href="###"><img src="img/2.jpg"></a>
    <a href="###"><img src="img/3.jpg"></a>
    <a href="###"><img src="img/4.jpg"></a>
    <a href="###"><img src="img/5.jpg"></a>
  </div>
 </div>
 <div id="main">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
 </div>

 <script type="text/javascript">
   //获取节点
   var btnList = document.getElementsByTagName("button");
   var inner = document.getElementById("inner");
   //可见宽度
   var perWidth = inner.children[0].offsetWidth;

   //添加事件
     for(var i = 0; i < btnList.length; i++) {
    btnList[i].index = i;
    btnList[i].onclick = function() {
      inner.style.left = -perWidth * this.index + "px";
      for(var j = 0; j < btnList.length; j++) {
        btnList[j].className = "";
      }
      this.className = "active";
    }
  }
 </script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助,熟练掌握选项卡切换操作。

Javascript 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
jquery 插件开发备注
Aug 27 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
javascript实现简单的全选和反选功能
Jan 05 #Javascript
Javascript原型链的原理详解
Jan 05 #Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 #Javascript
基于javascript实现图片懒加载
Jan 05 #Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 #Javascript
基于javascript实现图片预加载
Jan 05 #Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 #Javascript
You might like
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
javascript 常用方法总结
2009/06/03 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python实现八大排序算法
2016/08/13 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Python必须了解的35个关键词
2020/07/16 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
贷款委托书
2014/08/01 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
python中urllib包的网络请求教程
2022/04/19 Python