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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
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自动加载机制的深入分析
2013/06/08 PHP
CURL状态码列表(详细)
2013/06/27 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
react实现换肤功能的示例代码
2018/08/14 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python素数筛选法浅析
2018/03/19 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
SQL面试题
2013/12/09 面试题
职业生涯规划设计步骤
2014/01/12 职场文书
小学评语大全
2014/04/22 职场文书
个人综合鉴定材料
2014/05/23 职场文书
党的群众路线调研报告
2014/11/03 职场文书
被委托人身份证明
2015/08/07 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书