JS实现Tab栏切换的两种方式案例详解
更新时间：2022年08月15日 08:43:40 作者：yule-i7
这篇文章主要介绍了JS实现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>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
border: 1px solid red;
}
ul{
overflow: hidden;
}
ul>li{
list-style: none;
float: left;
width: 50px;
text-align: center;
}
div>div{
height: 300px;
background-color: pink;
text-align: center;
font-size: 50px;
}
#lastBox{
display: none;
}
.selected{
background-color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li id="first" class="selected">1</li>
<li id="last">2</li>
</ul>
<div id="firstBox">11111</div>
<div id="lastBox">222222</div>
</div>
<script>
var lis = document.querySelectorAll('ul>li')
var content = document.querySelectorAll('div>div')
//藏值 通过属性来保存对应的值 通过对应的对象来藏
//加所有li添加点击事件
for(var i=0;i<lis.length;i++){
// lis[i].setAttribute('data-index',i)
lis[i].index = i
lis[i].onclick = function(){
//排他思想 先将所有的全部设置一个值 然后再给自己设置一个值
for(var j=0;j<lis.length;j++){
lis[j].className = ""
}
this.className = "selected"
//排他
//先将其他的都隐藏 再给自己显示
for(var j=0;j<content.length;j++){
content[j].style.display = "none"
}
// document.getElementById(this.id+'Box').style.display = 'block'
// content[this.getAttribute('data-index')].style.display = 'block'
content[this.index].style.display = 'block'
}
}
</script>
</body>
</html>
面向对象的写法
<!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;
}
#box{
width: 400px;
height: 400px;
border: 2px solid pink;
margin: 0 auto;
}
ul{
display: flex;
margin: 0 auto;
width: 400px;
position: relative;
}
ul>li{
list-style: none;
width: 100px;
height: 50px;
font-size: 40px;
text-align: center;
border: 1px solid white;
background-color: yellow;
}
ul .showli{
background-color: orange;
}
#box div{
width: 400px;
height: 350px;
position: absolute;
display: none;
}
#box .show{
display: block;
background-color: rgb(0, 183, 255);
font-size: 80px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="showli">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="show">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
//用面向对象的思维写tab栏切换
//属性：选项框，选项框对应要切换的页面
class Tab{
constructor(ele){
this.box = document.getElementById(ele);
this.lis = this.box.querySelectorAll('ul > li');
this.divs = this.box.querySelectorAll('div');
}
change()
{
// console.log(this.box);
// console.log(this.lis);
// console.log(this.divs);
for(var i = 0; i < this.lis.length; i++)
{
//保存当前this指向
var _this = this;
//保存每一个li的下标，便于切换指定div
this.lis[i].index = i;
//每一个li添加点击事件
this.lis[i].onclick = function()
{
//排他，清空所有li与盒子的类名
for(var j = 0; j < _this.lis.length; j++)
{
_this.lis[j].className = "";
_this.divs[j].className = "";
}
//单独设置点击的li类名，让其样式和其余未被点击的li不同
this.className = "showli";
//检查当前li的下标是否成功保存
// console.log(this.index);
//让li对应的div显示出来
_this.divs[this.index].className = "show";
}
}
}
}
var tab = new Tab("box");
tab.change();
</script>
</body>
</html>到此这篇关于JS实现Tab栏切换的两种方式的文章就介绍到这了,更多相关JS Tab栏切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Sourcemap源代码映射介绍及示例详解解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-04-04
这篇文章主要介绍了javascript原型链继承用法,实例分析了javascript原型链继承中的技巧与相关注意事项,非常具有实用价值,需要的朋友可以参考下2015-01-01
JavaScript用JQuery呼叫Server端方法示例代码
这篇文章主要介绍了JavaScript用JQuery呼叫Server端方法,需要的朋友可以参考下2014-09-09
javascript中setAttribute()函数使用方法及兼容性
这篇文章主要介绍了javascript中setAttribute()函数使用方法及兼容性的相关资料,需要的朋友可以参考下2015-07-07
下面小编就为大家带来一篇Javascript 正则表达式校验数字的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了如何利用JavaScript语言实现多彩线条摆出心形效果，文中的实现步骤讲解详细，快跟随小编一起动手尝试一下吧2022-07-07
在使用uni-app完成扫码功能时,有时需要聚焦文本框的同时,需要软键盘消失,下面这篇文章主要给大家介绍了关于uniapp中input聚焦禁止软键盘弹出的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
webpack自动引入打包资源HtmlWebpackPlugin的实现
本文主要介绍了webpack自动引入打包资源HtmlWebpackPlugin的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
excel的预览库有不少,也都很强大,但是能很简单实现,下面这篇文章主要给大家介绍了关于前端实现（excel）xlsx文件预览的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了微信小程序实现签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
最新评论