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选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript中的__defineGetter__和__defineSetter__介绍
这篇文章主要介绍了javascript中的__defineGetter__和__defineSetter__介绍,类似面向对象语言中的get和set关键字,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JS自定义对象创建与简单使用方法,结合实例形式分析了JavaScript创建与使用自定义对象的相关操作技巧,需要的朋友可以参考下2020-01-01
js 中实现页面跳转的方法(window.location和window.open的区别)2009-03-03
事件委托，也叫事件代理，是JavaScript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素，让外层元素担当事件监听的职务。本文将详细为大家介绍JavaScript事件委托的用法，需要的可以参考一下2022-01-01
一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的数学算数运算。2015-11-11
来自启点的js,主要包括字符串的trim,cookies设置等2008-04-04
10个JavaScript中易犯小错误，需要大家注意！2016-02-02
最近需要在浏览器端实现excel数据的粘贴，一开始去找获取剪贴板数据的方法。但是在浏览器端，JS去取是受安全限制的。2009-07-07
javascript dom追加内容的使用还是比较广泛的，在本文将为大家介绍下具体的使用方法，感兴趣的朋友可以参考下2013-09-09
这篇文章主要为大家介绍CSS图片响应式 垂直水平居中，在最近的项目中经常遇到这样的需求，于是把相关内容整理一下，分享给大家，需要的朋友可以来参考下2015-08-08
最新评论