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选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS获取文件大小的方法,结合实例总结分析了JavaScript获取文件大小的常用技巧,并给出了判断文件格式与大小的完整实例供读者参考,需要的朋友可以参考下2015-12-12
词法作用域就是定义在词法阶段的作用域,如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来“修改”（也可以说欺骗）词法作用域呢?JavaScript 中有两种机制来实现这个目的,感兴趣的朋友跟随小编一起看看吧2023-10-10
本文主要介绍了js实现WebSocket 连接的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
这篇文章主要介绍了微信小程序的开发范式BeautyWe.js详解，它是一套专注于微信小程序的企业级开发范式，它的愿景是：让企业级的微信小程序项目中的代码，更加简单、漂亮,需要的朋友可以参考下2019-07-07
在项目开发中我们常需要给某些数据定义一个唯一标识符,便于寻找关联,这篇文章主要给大家介绍了关于JS生成id的多种解决方案,文中介绍的方法都非常实用,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了JS模拟bootstrap下拉菜单效果,结合完整实例形式分析了javascript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
下面小编就为大家带来一篇浅谈JS中String()与 .toString()的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了JavaScript动画：offset和匀速动画详解(含轮播图的实现)，并把实现代码做了分享，有兴趣的朋友参考下。2018-02-02
这篇文章主要介绍了JS动态设置页面高度的操作代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
最新评论