JavaScript实现tab栏切换效果

更新时间：2020年03月16日 09:06:26 作者：xiaofiy

这篇文章主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
  <!-- css样式 -->
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .box {
   width: 600px;
   margin: 100px 500px;
   border: 1px solid #999;
  }
  li {
   list-style: none;
  }
  .tab_top {
   width: 600px;
   height: 50px;
   background-color: #ccc;
  }
  .tab_top li {
   float: left;
   width: 50px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   padding: 0 20px;
  }
  .current {
   background-color: red;
   color: #fff;
  }
  .tab_con {
   width: 600px;
   height: 300px;
   background-color: #fff;
  }
  先在css里面设置下面小div全部隐藏
  .item {
   display: none
  }
 </style>
 <!-- html结构 -->
 <body>
 <div class="box">
  <div class="tab_top">
   <ul>
    <li class="current">标题一</li>
    <li>标题二</li>
    <li>标题三</li>
    <li>标题四</li>
    <li>标题五</li>
   </ul>
  </div>
  <div class="tab_con">
   <div class="item" style="display: block;"> --->此处默认第一个显示
    我是内容一<br>
    我是内容一<br>
    我是内容一<br>
    我是内容一<br>
    我是内容一<br>
   </div>
   <div class="item">
    我是内容二<br>
    我是内容二<br>
    我是内容二<br>
    我是内容二<br>
    我是内容二<br>
   </div>
   <div class="item">
    我是内容三<br>
    我是内容三<br>
    我是内容三<br>
    我是内容三<br>
    我是内容三<br>
   </div>
   <div class="item">
    我是内容四<br>
    我是内容四<br>
    我是内容四<br>
    我是内容四<br>
    我是内容四<br>
   </div>
   <div class="item">
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
    我是内容五<br>
   </div>
  </div>
 </div>
</body>

js:

<script>
 //1 上的选项卡 点击某一个 当前这一个底色是红色 其余不变 （排他思想） 修改类名的方法
 //获取元素
 //01 获取上半部分盒子
 var tab_top = document.querySelector('.tab_top');
 //02 获取上班部分 所有小li 得到一个数组
 var lis = tab_top.querySelectorAll('li');
 //03 获取下半部分 所有小div盒子 得到一个数组
 var item = document.querySelectorAll('.item')
 //for 循环所有小li 绑定点击事件
 for (var i = 0; i < lis.length; i++) {
  //开始给上面li设置索引号 属性index 值 i 
  lis[i].setAttribute('index', i);
  // 注册点击事件
  lis[i].onclick = function () {
   // 来个排他思想
   for (var j = 0; j < lis.length; j++) {
    //先让所有的li 点击没有样式
    lis[j].className = '';
   }
   // 谁点击 谁加样式
   this.className = 'current'
   //2 下面显示内容模块也要写在onclick里面 因为一一对应
   // 给上面top 所有li 添加index 索引号 属性从0开始 自定义属性

   // 上面已经设置好 现在拿来用
   var index = this.getAttribute('index');
   // 点击上面li 对应下面div显示出来
   //再来排他思想 先干掉其他人 让隐藏 点谁 谁显示
   for (var k = 0; k < item.length; k++) {
    //所有的小div 隐藏
    item[k].style.display = 'none'
   }
   //点击哪个小li 小li的index对应的div 显示
   item[index].style.display = 'block';

  }

 }

</script>

效果图：

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

web页面和微信小程序页面实现瀑布流效果
这篇文章主要介绍了web页面和微信小程序页面实现瀑布流效果，本文通过实例代码图文介绍，给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2018-09-09
javascript创建元素和删除元素实例小结
这篇文章主要介绍了javascript创建元素和删除元素,结合实例形式总结分析了javascript针对页面元素的动态创建、删除及子元素操作相关实现技巧,需要的朋友可以参考下
2019-06-06
前端微信支付js代码
这篇文章主要为大家详细介绍了前端微信支付js代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
fmt:formatDate的输出格式详解
本篇文章主要是对fmt:formatDate的输出格式进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
功能强大的Bootstrap使用手册（一）
这篇文章主要为大家详细介绍了功能强大的Bootstrap使用手册，分享了Bootstrap使用步骤和常用用法，感兴趣的小伙伴们可以参考一下
2016-08-08
在JS数组特定索引处指定位置插入元素的技巧
这篇文章主要介绍了如何在JS数组特定索引处指定位置插入元素？将一个元素插入到现有数组的特定索引处，需要的朋友可以参考下
2014-08-08
JS高级技巧(简洁版)
由于在JS中，所有的函数都是对象，所以使用函数指针十分简单，也是这些东西使JS函数有趣且强大，这里特分享一下
2018-07-07
浅谈JavaScript 执行环境、作用域及垃圾回收
下面小编就为大家带来一篇浅谈JavaScript:执行环境、作用域及垃圾回收。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
用js+cookie记录滚动条位置
用js+cookie记录滚动条位置...
2007-01-01
详解JS设计模式之桥接模式用法
javascript桥接桥接设计模式（Bridge Pattern）是一种结构型设计模式,它用于将抽象部分与其具体实现部分分离,使它们可以独立地变化,本文将通过代码示例详解的给大家介绍一下JS桥接模式,需要的朋友可以参考下
2023-08-08