JavaScript之tab栏切换
本文主要介绍如何通过JS实现tab栏的切换效果，主要介绍三种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象1.利用自定义属性此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下：2.利用let关键词此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下：3
·
本文主要介绍如何通过JS实现tab栏的切换效果，下面介绍五种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象实现代码复用；4.let关键字封装函数实现代码复用；5.自定义属性封装函数实现代码复用
1.利用自定义属性
此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
ul::after {
display: block;
content: '';
clear: both;
}
ul li {
float: left;
margin-right: 5px;
background-color: skyblue;
}
ul li:first-child {
background-color: #ccc;
}
h2 {
text-align: center;
}
ul li a {
display: inline-block;
font-size: 20px;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
color: #000;
}
/* 选项区域 */
.optionArea {
position: relative;
}
.optionArea div {
position: absolute;
top: 10px;
width: 1220px;
height: 500px;
background-color: pink;
display: none;
}
.optionArea div:first-child {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="javascript:;">选项一</a></li>
<li><a href="javascript:;">选项二</a></li>
<li><a href="javascript:;">选项三</a></li>
<li><a href="javascript:;">选项四</a></li>
<li><a href="javascript:;">选项五</a></li>
<li><a href="javascript:;">选项六</a></li>
</ul>
<section class="optionArea">
<div>
<h2>标题1</h2>
</div>
<div>
<h2>标题2</h2>
</div>
<div>
<h2>标题3</h2>
</div>
<div>
<h2>标题4</h2>
</div>
<div>
<h2>标题5</h2>
</div>
<div>
<h2>标题6</h2>
</div>
</section>
<script>
var lis = document.querySelectorAll('li');
var divs = document.querySelectorAll('div');
for (let i = 0; i < lis.length; i++) {
document.querySelectorAll('li')[i].setAttribute('index', i);
lis[i].onclick = function() {
for (let i of lis) {
i.style.backgroundColor = 'skyblue';
}
this.style.backgroundColor = '#ccc';
for (let i of divs) {
i.style.display = 'none';
}
divs[this.getAttribute('index')].style.display = 'block';
}
}
</script>
</body>
</html>2.利用let关键词
此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
ul::after {
display: block;
content: '';
clear: both;
}
ul li {
float: left;
margin-right: 5px;
background-color: skyblue;
}
ul li:first-child {
background-color: #ccc;
}
h2 {
text-align: center;
}
ul li a {
display: inline-block;
font-size: 20px;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
color: #000;
}
/* 选项区域 */
.optionArea {
position: relative;
}
.optionArea div {
position: absolute;
top: 10px;
width: 1220px;
height: 500px;
background-color: pink;
display: none;
}
.optionArea div:first-child {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="javascript:;">选项一</a></li>
<li><a href="javascript:;">选项二</a></li>
<li><a href="javascript:;">选项三</a></li>
<li><a href="javascript:;">选项四</a></li>
<li><a href="javascript:;">选项五</a></li>
<li><a href="javascript:;">选项六</a></li>
</ul>
<section class="optionArea">
<div>
<h2>标题1</h2>
</div>
<div>
<h2>标题2</h2>
</div>
<div>
<h2>标题3</h2>
</div>
<div>
<h2>标题4</h2>
</div>
<div>
<h2>标题5</h2>
</div>
<div>
<h2>标题6</h2>
</div>
</section>
<script>
var lis = document.querySelectorAll('li');
var divs = document.querySelectorAll('div');
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
for (let i of lis) {
i.style.backgroundColor = 'skyblue';
}
this.style.backgroundColor = '#ccc';
for (let i of divs) {
i.style.display = 'none';
}
divs[i].style.display = 'block';
}
}
</script>
</body>
</html>3.利用事件对象。前两种方法所做出来的tab栏是单一的，若要进行代码的复用，则会出现问题。利用事件对象可使不同的tab栏互不影响，达到代码复用的效果，从而提高开发效率。代码如下：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.tab .ul::after {
display: block;
content: '';
clear: both;
}
.tab .ul a {
float: left;
margin-right: 5px;
background-color: skyblue;
font-size: 20px;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
color: #000;
}
.bc {
background-color: #ccc !important;
}
.tab h2 {
text-align: center;
}
.optionArea div:nth-child(n+2) {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<script>
var uls = document.querySelectorAll('.ul');
for (let i of uls) {
i.addEventListener('click', function(e) {
var as = e.target.parentNode.children;
for (let i = 0; i < as.length; i++) {
as[i].className = '';
as[i].setAttribute('index', i);
}
e.target.className = 'bc';
// 底下的标题先全部隐藏
var divs = e.target.parentNode.nextElementSibling.children;
for (let i of divs) {
i.style.display = 'none';
}
// 显示对应的标题
divs[e.target.getAttribute('index')].style.display = 'block';
})
}
</script>
</body>
</html>4.第四种方法实际上将第二种方法进行封装，利用函数的局部作用域及let提供的块级作用域实现tab的复用。
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.tab .ul::after {
display: block;
content: '';
clear: both;
}
.tab .ul a {
float: left;
margin-right: 5px;
background-color: skyblue;
font-size: 20px;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
color: #000;
}
.bc {
background-color: #ccc !important;
}
.tab h2 {
text-align: center;
}
.optionArea div:nth-child(n+2) {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<script>
var tabs = document.querySelectorAll('.tab');
for (let i of tabs) {
tabChange(i);
}
function tabChange(e) {
var as = e.querySelectorAll('a');
var divs = e.querySelectorAll('section div');
for (let i in as) {
as[i].onclick = function() {
for (let i of as) {
i.className = '';
}
this.className = 'bc';
for (let i of divs) {
i.style.display = 'none';
}
divs[i].style.display = 'block';
}
}
}
</script>
</body>
</html>5.第五种方法未使用let关键词，主要根据创建的自定义属性实现效果。
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.tab .ul::after {
display: block;
content: '';
clear: both;
}
.tab .ul a {
float: left;
margin-right: 5px;
background-color: skyblue;
font-size: 20px;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
color: #000;
}
.bc {
background-color: #ccc !important;
}
.tab h2 {
text-align: center;
}
.optionArea div:nth-child(n+2) {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<div class="tab">
<div class="ul">
<a href="javascript:;" class="bc">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<section class="optionArea">
<div>
标题1
</div>
<div>
标题2
</div>
<div>
标题3
</div>
</section>
</div>
<script>
var tabs = document.querySelectorAll('.tab');
for (let i of tabs) {
tabChange(i);
}
function tabChange(e) {
var as = e.querySelectorAll('a');
var divs = e.querySelectorAll('section div');
for (var i = 0; i < as.length; i++) {
// 可以通过节点的“.”直接创建自定义属性，但不会显示出来
as[i].location = i;
as[i].onclick = function() {
for (let i of as) {
i.className = '';
}
this.className = 'bc';
for (let i of divs) {
i.style.display = 'none';
}
divs[this.location].style.display = 'block';
}
}
}
</script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
8
0- 0
已为社区贡献4条内容
所有评论(0)