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 相关文章推荐
jQuery示例收集
Nov 05 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
javascript 函数使用说明
2010/04/07 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
pandas重新生成索引的方法
2018/11/06 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
物业招聘计划书
2014/01/10 职场文书
学校消防安全制度
2014/01/30 职场文书
火车的故事教学反思
2014/02/11 职场文书
市场开发计划书
2014/05/07 职场文书
骨干教师考核方案
2014/05/09 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL