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 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
js实现特别简单的钟表效果
Sep 14 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php 代码优化之经典示例
2011/03/24 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
学院书画协会部门职责
2013/11/28 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
创先争优制度
2014/01/21 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
职业生涯规划书前言
2014/04/15 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
党员民主评议总结
2014/10/20 职场文书
整改通知书
2015/04/20 职场文书
建国大业观后感600字
2015/06/01 职场文书