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实现点击下载的小例子
Jul 10 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
Javascript作用域和作用域链原理解析
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递归函数返回值使用方法
2013/02/18 PHP
php把数组值转换成键的方法
2015/07/13 PHP
php中的登陆login实例代码
2016/06/20 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python实现自动登录
2018/09/17 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python队列原理及实现方法示例
2019/11/27 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
详解Python中namedtuple的使用
2020/04/27 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
行政总监岗位职责
2013/12/05 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
党员目标管理责任书
2014/07/25 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
对Keras自带Loss Function的深入研究
2021/05/25 Python