tab栏切换原理

本文是我学习tab栏切换时的笔记，步骤很详细。比较适用于Javascript初学者

1.基础 - 排他思想

如图，点击任意一个按钮，当前按钮应该显示橘色，其他显示默认颜色灰色。

代码运行步骤：

利用for循环遍历5个按钮；

选中的按钮进行 onclick 事件时，首先删除所有按钮的类名，使其全部显示灰色（34行）；

然后给当前点击的按钮添加指定类名，使其显示橘色（37行）。

示例代码：

 
 
 
 
  *{
  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;
  }
 
 
 
 
 
  按钮1
  按钮2
  按钮3
  按钮4
  按钮5
 
 

2.tab栏切换

如图：在排他思想的基础上，五个按钮底下添加五个新盒子，并用一个大盒子将按钮和底下的盒子包裹。

底下的盒子全部隐藏，默认只显示第一个。

新增步骤：

为btns[i]添加自定义属性index，用来关联下面的大盒子（42行）；

点击按钮后先让底下的盒子全部隐藏（54行）；

然后给当前所点击按钮相关联的盒子添加指定属性（57行）。

示例代码：

 
 
 
 
  *{
  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;
  }
 
 
 
 
 
  
  按钮1
  按钮2
  按钮3
  按钮4
  按钮5
  
  
  1
  2
  3
  4
  5
  
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！