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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
python绘制分布折线图的示例
2020/09/24 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
致跳高运动员加油稿
2014/02/12 职场文书
学生期末评语大全
2014/04/30 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
初中学校对照检查材料
2014/08/19 职场文书
自主招生自荐信格式
2015/03/04 职场文书
交通安全月活动总结
2015/05/08 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
如何做好工作总结!
2019/04/10 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript