tab栏切换案例（登录/注册切换案例）

最新推荐文章于 2022-11-22 22:11:51 发布

闫之有理呀

最新推荐文章于 2022-11-22 22:11:51 发布

阅读量3.1k

点赞数 23

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/weixin_62386142/article/details/124390309

版权

这篇博客介绍了初学者如何使用JavaScript实现一个基本的Tab栏切换效果。通过点击选项卡，内容区会相应地展示或隐藏，应用了排他思想来切换选中状态。博主提供了HTML和CSS代码，并用for循环为每个选项卡绑定点击事件，以改变选中样式并显示对应的内容区域。

摘要由CSDN通过智能技术生成

初学js，跟着视频做了一个简单的tab栏切换案例。

案例分析：

当鼠标点击上面相应的选项卡（tab),下面内容跟随着变化

思

思路：

1、tab 栏切换有2个大的模块

2、最上面的模块选项卡，触摸其中的一个，当前这一个底色会变色，其余不变（这里用到的排他思想），通过修改类名的方式。（可以用for循环绑定触摸事件)

3、下面的模块内容，会跟随着上面的选项卡变化，所以下面模块变化写到触摸事件里面

4、规律：下面的模块显示内容和上面的选项卡--对应，相匹配。

5、当我们点击上面的模块选项卡，让下面里面的内容显示，其余隐藏(排他思想）

代码如下：

<!DOCTYPE html>

<head>

</head>

<style>

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;

box-sizing: border-box;

}

#content{

height: 350px;

width: 300px;

background-color:antiquewhite;

margin: 100px auto;

}

.content-header{

height: 50px;

}

.content-header a{

margin: 20px;

font-size: 20px;

position: relative;

left:30px;

top:20px;

}

input{

height: 30px;

width: 220px;

margin: 7px;

position: relative;

top:10px;

left: 35px;

}

.current{

color: brown;

}

.s2 input{

width: 15px;

height: 15px;

}

.s2 span{

position: relative;

top:9px;

left: 28px;

}

.s3 input{

width: 15px;

height: 15px;

position: relative;

top: -19px;

left: 150px;

}

.s3 span{

position: relative;

top:-20px;

left: 142px;

}

.btn{

position: relative;

}

</style>

<body>

</div>

</div>

</div>

</div>

</div>

//获取元素

var lis=document.querySelector(".content-header").querySelectorAll("a");

var content=document.querySelector(".content-header");

var lis=content.querySelectorAll("a");

var mains=document.querySelectorAll(".main");

//for循环绑定点击事件

for(var i=0;i<lis.length;i++){

//开始给两个小a，设置索引号

lis[i].setAttribute("index",i);

lis[i].οnclick=function(){

//干掉所有人其余a清除 class这个类

for(var i=0;i<lis.length;i++){

lis[i].className="";

}

//留下我自己

this.className="current";

var index=this.getAttribute("index");

console.log(index);

//干掉所有人，让其余的main的div 隐藏

for(var j=0;j<mains.length;j++){

mains[j].style.display="none";

}

//留下我自己让对应的main显示出来

mains[index].style.display="block";

}

</script>

</body>

</html>