tab栏切换原理


Posted in Javascript onMarch 22, 2017

本文是我学习tab栏切换时的笔记,步骤很详细。比较适用于JavaScript初学者

1.基础 - 排他思想

如图,点击任意一个按钮,当前按钮应该显示橘色,其他显示默认颜色灰色。

代码运行步骤:

利用for循环遍历5个按钮;

选中的按钮进行 onclick 事件时,首先删除所有按钮的类名,使其全部显示灰色(34行);

然后给当前点击的按钮添加指定类名,使其显示橘色(37行)。

tab栏切换原理

示例代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>tab栏切换效果</title>
 <style media="screen">
  *{
  margin: 0;
  padding: 0;
  border: 0 none;
  outline: none;
  }
  #btns{
  width: 300px;
  margin: 100px auto;
  }
  #btns button {
  width: 60px;
  height: 30px;
  float: left;
  border-right: 1px solid #ccc;
  }
  .color{
  background-color: #eb923f;
  }
 </style>
 <script type="text/javascript">
  window.onload = function () {
  var btns = document.getElementById("btns").getElementsByTagName("button");
  for (var i = 0; i < btns.length; i++) {
   btns[i].onclick = function () {
   for (var j = 0; j < btns.length; j++) {
    //把所有的button清空类名
    btns[j].className = "";
   }
   //点击的那个盒子添加指定类名
   this.className = "color";
   }
  }
  }
 </script>
 </head>
 <body>
 <div id="btns">
  <button class="color">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
 </div>
 </body>
</html>

2.tab栏切换

如图:在排他思想的基础上,五个按钮底下添加五个新盒子,并用一个大盒子将按钮和底下的盒子包裹。

底下的盒子全部隐藏,默认只显示第一个。

tab栏切换原理

新增步骤:

为btns[i]添加自定义属性index,用来关联下面的大盒子(42行);

点击按钮后先让底下的盒子全部隐藏(54行);

然后给当前所点击按钮相关联的盒子添加指定属性(57行)。

示例代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>tab栏切换效果</title>
 <style media="screen">
  *{
  margin: 0;
  padding: 0;
  border: 0 none;
  outline: none;
  }
  .baohan{
  width: 300px;
  margin: 100px auto;
  border: 1px solid #ccc;
  }
  #btns button {
  width: 60px;
  height: 30px;
  float: left;
  border-right: 1px solid #ccc;
  }
  #divs div {
  width: 300px;
  height: 100px;
  font-size: 60px;
  padding-top: 60px;
  background-color: #eb923f;
  text-align: center;
  display: none;
  }
  .color{
  background-color: #eb923f;
  }
 </style>
 <script type="text/javascript">
  window.onload = function () {
  var btns = document.getElementById("btns").getElementsByTagName("button");
  var divs = document.getElementById("divs").getElementsByTagName("div");
  for (var i = 0; i < btns.length; i++) {
   btns[i].index = i; //自定义属性,用于关联下面的大盒子
   btns[i].onclick = function () {

   for (var j = 0; j < btns.length; j++) {
    //把所有的button清空类名
    btns[j].className = "";
   }
   //点击的那个盒子添加指定类名
   this.className = "color";
   for (var i = 0; i < divs.length; i++) {
    //先让底下的div全部隐藏
    divs[i].style.display = "none";
   }
   //然后给当前所点击按钮相关联的盒子添加指定属性
   divs[this.index].style.display = "block";
   }
  }
  }
 </script>
 </head>
 <body>
 <div class="baohan">
  <div id="btns">
  <button class="color">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  </div>
  <div id="divs">
  <div style="display:block;">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  </div>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript天然的迭代器
Oct 29 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
js中的DOM模拟购物车功能
Mar 22 #Javascript
js+canvas实现动态吃豆人效果
Mar 22 #Javascript
JavaScript实现星星等级评价功能
Mar 22 #Javascript
discuz表情的JS提取方法分析
Mar 22 #Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 #Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
Vue计算属性的学习笔记
Mar 22 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php GUID生成函数和类
2014/03/10 PHP
php微信开发接入
2016/08/27 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
php中如何执行linux命令详解
2018/11/06 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
input框中的name和id的区别
2016/11/16 Javascript
手机端转换rem适应
2017/04/01 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python操作mysql数据库
2017/03/05 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
医学专业自荐信
2014/06/14 职场文书
档案工作汇报材料
2014/08/21 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js