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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 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控制网页过期时间的代码
2008/09/28 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python 内置函数filter
2017/06/01 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
给朋友的道歉信
2014/01/09 职场文书
2014学年自我鉴定
2014/02/23 职场文书
项目建议书怎么写
2014/05/15 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
小学毕业感言100字
2015/07/30 职场文书
离婚协议书范文2016
2016/03/18 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
详解nginx location指令
2022/01/18 Servers