JavaScript实现tab栏切换效果


Posted in Javascript onMarch 16, 2020

本文实例为大家分享了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实现tab栏切换效果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
bootstrap css样式之表单
Jan 19 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
实现高性能javascript的注意事项
May 27 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 #Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 #Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 #Javascript
JavaScript实现动态留言板
Mar 16 #Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 #Javascript
js+canvas实现纸牌游戏
Mar 16 #Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 #Javascript
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
Javascript学习指南
2014/12/01 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python 日志 logging模块详细解析
2020/03/31 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python新手学习使用库
2020/06/11 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
新员工培训个人的自我评价
2013/10/09 职场文书