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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
详解vue 组件的实现原理
Nov 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
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python实现去除代码前行号的方法
2015/03/10 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python使用turtle库绘制树
2018/06/25 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
对python 调用类属性的方法详解
2019/07/02 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python导入库的具体方法
2020/06/18 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python3中编码获取网页的实例方法
2020/11/16 Python
药学专业大学生个人的自我评价
2013/11/04 职场文书
学生爱国演讲稿
2014/01/14 职场文书
投诉书格式范本
2015/07/02 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
nginx静态资源的服务器配置方法
2022/07/07 Servers