分享几种比较简单实用的JavaScript tabel切换

闲着没事,随便写了个简单的Javascript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧

方法一：for循环+if判断当前点击与自定义数组是否匹配

 
 
 
  button {
   width:120px;
   height: 32px;
   line-height: 32px;
   background-color: #ccc;
   font-size: 24px;
  }
  div {
   display: none;
   width:200px;
   height: 200px;
   font-size: 72px;
   color:#ddd;
   background-color: green;
   border:1px solid black;
  }
 


 1
 2
 3
 4
 1
 2
 3
 4
 

 

方法二：自定义index为当前点击

 
 
 
  button {
   width:120px;
   height: 32px;
   line-height: 32px;
   background-color: #ccc;
   font-size: 24px;
  }
  div {
   display: none;
   width:200px;
   height: 200px;
   font-size: 72px;
   color:#ddd;
   background-color: green;
   border:1px solid black;
  }
 


 1
 2
 3
 4
 1
 2
 3
 4
 

 

  方法三：className

 
 
 
  * {padding:0; margin:0;}
  button {
   background-color: #ccc;
   width:80px;
   height: 30px;
  }
  .btn-active {
   background-color: yellow;
   font-weight:bold;
   font-size: 14px;
  }
  div{
   width:200px;
   height: 200px;
   font-size: 64px;
   background-color: #0c0;
   display: none;
   color:#fff;
  }
  .div-active {
   display: block;
  }
 


 按钮1
 按钮2
 按钮3
 按钮4
 1
 2
 3
 4
 

 

方法四：className+匿名函数的自执行！

 
 
 
  * {padding:0; margin:0;}
  button {
   background-color: #ccc;
   width:80px;
   height: 30px;
  }
  .btn-active {
   background-color: yellow;
   font-weight:bold;
   font-size: 14px;
  }
  div{
   width:200px;
   height: 200px;
   font-size: 64px;
   background-color: #0c0;
   display: none;
   color:#fff;
  }
  .div-active {
   display: block;
  }
 


 按钮1
 按钮2
 按钮3
 按钮4
 1
 2
 3
 4
 

 

以上内容是小编给大家分享几种比较简单实用的Javascript tabel切换，希望大家喜欢。