JavaScript实现tab栏切换的效果
tab栏：点击不同的标签，显示不同的内容，被点击的标签样式发生改变（突出选中的是哪一个）
实现思路：
1、将tab栏分为上下两部分，上面是导航列表，下面是各部分对应的内容。把标签和内容都写出来，内容按照标签顺序依次顺着写，给标签都添加自定义属性- - -index，属性值从0开始，依次增加1
2、首先实现上面的效果，点击后样式切换，被点击的字体颜色、背景颜色改变等:
①css定义一个类eg：current，里面定义改变后的样式，先给第一个标签写一个该类名，其他的不写类名，
②js获取所有标签元素对象，- - -for循环- - -遍历给每个标签绑定- - -onclick点击事件
③点击事件里面使用排他算法- - -for循环- - -将所有标签设置类名为空- - -className = ‘' ，然后当前被点击的标签设置上面定义的特殊类名- - -this.className = ‘current';
3、实现下面，根据点击的标签，出现不同的内容：
①css将第一个标签对应内容显示，其他的都隐藏起来：
.box-tb .item:nth-child(n+2) {
display: none;
}
②获取内容的全部元素对象，获取标签的index值，在点击事件里再添加一个排他思想代码- - -for循环- - -遍历内容的元素对象，将所有内容设置隐藏- - -items[i].style.display = ‘none';然后根据被点击的标签，将对应的内容显示- - -items[index].style.display = ‘block';
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 600px;
margin: 100px auto;
}
.box-th {
overflow: hidden;
width: 100%;
background-color: #88ace6;
}
.box-th ul li {
float: left;
width: 90px;
height: 20px;
margin-right: 10px;
padding: 5px;
text-align: center;
}
.current {
color: #fff;
background-color: green;
}
.box-tb {
margin-top: 20px;
}
.box-tb .item:nth-child(n+2) {
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="box-th">
<ul>
<li data-index="0" class="current">春</li>
<li data-index="1">夏</li>
<li data-index="2">秋</li>
<li data-index="3">冬</li>
</ul>
</div>
<div class="box-tb">
<div class="item">春季排四季之首，新的轮回从此开启。春，代表着温暖、生长，植物发芽，风和日暖，鸟语花香。这季节的气温、日照、降雨，处于一年中的转折点，趋于上升或增多。春季，阴阳之气开始转变，万物随阳气上升而萌牙生长，春季是万物生长、春耕播种的季节，所谓“一年之计在于春”。 春季起始—结束： 依据天象变化划分：传统上是以“立春”（斗指寅，太阳达黄经315°时）作为春季的起点，至“立夏”结束。 依据气温变化划分：近代采用学者张宝堃的“候平均气温”划分，以候平均温度(连续5天气温的平均)从10℃以下稳定升到10℃以上时作为春季开始，至候平均温度22℃以上（入夏）时结束。
</div>
<div class="item">夏季万物至此皆盛，是农作物进入旺季生长的一个季节。温度升高，天气炎热，狂风暴雨频发，万物盛长。夏季是风暴最多的季节，常伴随着大风、暴雨。北半球夏季，大陆受热气压上升形成低气压，海洋恒温温度相对较低形成高气压，根据环流，夏季吹的是东南风。夏季北半球各地的白昼时间全年最长。 夏季起始—结束： 依据天象变化划分：以“立夏”（斗指东南，太阳达黄经45°）作为夏季的起点，至“立秋”结束。 依据气温变化划分：以候平均温度稳定升到22℃以上时作为夏季开始，至候平均温度22℃以下时结束。
</div>
<div class="item">秋季是收获季节，意味着万物开始从繁茂成长趋向萧索成熟。秋季的前两个节气立秋、处暑，还是酷热天气，因太阳所带来的热力未减弱，所谓“热在三伏”，三伏天出现在小暑与处暑之间，是一年中气温最高且又潮湿、闷热的日子。造成三伏天湿度高原因是，三伏天吹东南风，而东南方是太平洋和印度洋，空气潮湿，风的潮湿造成了三伏天湿度大；到了深秋之后则相反，吹西北风，而西北方是干燥的内陆，干燥的西北风造成深秋之后气候干燥。秋季前两个节气的气候特征为潮湿、闷热，秋季真正凉爽一般要到白露节气之后，自白露起渐渐趋向凉爽、干燥。随着进入深秋，气候由热转凉，万物随寒气增长，逐渐萧落，这是热与冷交替的季节。秋季最明显的变化草木的叶子从繁茂的绿色到发黄，并开始落叶庄稼则开始成熟。
[1] 秋季起始—结束： 依据天象变化划分：以“立秋”（斗指西南，太阳达黄经135°）作为秋季的起点，至“立冬”结束。 依据气温变化划分：以候平均温度从22℃以上稳定降到22℃以下作为秋季开始，至候平均温度降到10℃以下时结束。
</div>
<div class="item">冬季，阴阳转变，万物由收到藏，植物生气闭蓄。进入立冬后意味着秋季少雨干燥气候渐过去，转为阴雨寒冻的冬季气候特征。北半球的太阳高度小，白昼时间短。所谓“热在三伏”，冷在三九”，冬至为"一九天"，冬至之前还不算很冷，冬至过后强冷空气南下频繁，并越过了南岭，气温骤降，天气寒冷。冬季真正寒冷，是在冬至后。 冬季起始—结束： 依据天象变化划分：以“立冬”（斗指西北，太阳达黄经225°）作为冬季的起点，至下一“立春”结束。 依据气温变化划分：以候平均温度稳定降到10℃以下为冬季的开始，至候平均温度10℃以上时结束。
</div>
</div>
</div>
<script>
var list = document.querySelector('.box-th').querySelectorAll('li');
var items = document.querySelector('.box-tb').querySelectorAll('.item');
for (var i = 0; i < list.length; i++) {
list[i].onclick = function() {
// 导航栏样式切换，排他算法
for (var i = 0; i < list.length; i++) {
list[i].className = '';
}
this.className = 'current';
// 下面展示内容切换，排他算法
var index = this.getAttribute('data-index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现Tab栏切换特效
这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示. 运行效果展示: 如上图所示,其实就是点击上方的Tab栏然后Tab栏本身的样式会被修改,然后其下方的内容块也会跟着显示对应的内容.这样的效果以及功能在前端的应用是非常广泛的,所以这可以说是前端必会了.话不多说下面先上代码: (这里就不上CSS样式代码了,个人根据需求进行设置即可,li用float布局就好) HTML的结构: <div class="tab&quo
-
JavaScript实现简易tab栏切换案例
本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想: 1).所有元素全部清除样式(干掉其他人) 2).给当前元素设置样式 (留下我自己) 3).注意顺序不能颠倒,首先干掉其他人,再设置自己 我的思路: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta char
-
JavaScript实现简易tab栏切换内容栏
本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
-
js tab栏切换代码实例解析
今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con) 3.采用display:flex:使标题栏菜单和内容栏的内容水平对齐(可能待会放的代码不是很规范,但实现对齐效果) 4.js编写鼠标移入事件,主要是利用display:none和display:block之间的切换. 下面放下我当时写的代码吧,可能写得不是很正规,不符合习惯,请大家见谅
-
js实现tab栏切换效果
本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏切换</title> <style> * { margin: 0; margin: 0; padding: 0; list-style: none; } .nav
-
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"> &l
-
JavaScript TAB栏切换效果的示例
代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo
-
JavaScript实现tab栏切换的效果
tab栏:点击不同的标签,显示不同的内容,被点击的标签样式发生改变(突出选中的是哪一个) 实现思路: 1.将tab栏分为上下两部分,上面是导航列表,下面是各部分对应的内容.把标签和内容都写出来,内容按照标签顺序依次顺着写,给标签都添加自定义属性- - -index,属性值从0开始,依次增加1 2.首先实现上面的效果,点击后样式切换,被点击的字体颜色.背景颜色改变等: ①css定义一个类eg:current,里面定义改变后的样式,先给第一个标签写一个该类名,其他的不写类名, ②js获取所有标签元素
-
angularjs实现Tab栏切换效果
本文实例为大家分享了angularjs实现Tab栏切换效果的具体代码,供大家参考,具体内容如下 如图所示 选中后提交的实例代码: <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <script type="text/javascript&
-
jQuery实现tab栏切换效果
本文实例为大家分享了jQuery实现tab栏切换效果的具体代码,供大家参考,具体内容如下 具体实现功能 1.切换选项卡 2.添加选项卡 3.删除选项卡 4.编辑选项卡 html结构 <div class="tabsbox" id="tab"> <!-- tab标签 --> <nav class="firstnav"> <!-- tab栏标题 --> <ul> <li class=&
-
vue实现tab栏切换效果
本文实例为大家分享了vue实现tab栏切换效果的具体代码,供大家参考,具体内容如下 一个简单的tab栏切换组件,由tabs以及tab-pane组成 效果图 使用 <template> <div class="container"> <tabs default-active="2" class="build-tabs" > <tab-pane