原生js实现选项卡效果

最新推荐文章于 2022-03-27 21:46:47 发布

Harding Duan

最新推荐文章于 2022-03-27 21:46:47 发布

阅读量699

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42669658/article/details/81056645

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

最简易的选项卡代码如下:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.clearfix::after{display: blockclear: both;content:"";}
.btns p{width:150px;text-align: center;line-height:30px;border-right:1px solid #666;float: left;}
.btns{border:1px solid #666;display: inline-block;}
.btns p:last-child{border-right:0}
.content{width:754px;height:400px;border:1px solid #666;}
.content li{height:100%;line-height: 400px;font-size:80px;text-align: center;display: none;}
</style>
</head>
<body>
<div class="btns clearfix">
<p>按钮1</p>
<p>按钮2</p>
<p>按钮3</p>
<p>按钮4</p>
<p>按钮5</p>
</div>
<ul class="content">
<li style="display: block;">内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</body>
<script>
var btns=document.getElementsByClassName("btns")
var btn=btns[0].getElementsByTagName("p")
var ul=document.getElementsByClassName("content")
var aLi=ul[0].getElementsByTagName("li")
//获取的是一组数据,类似数组的伪数组   
//只有length属性,不包括数组的方法   
// nodelist节点列表

for (var i = 0; i < btn.length; i++) {                 //给每一个按钮添加点击事件
btn[i].index=i                                         //给每一个按钮添加一个序号
btn[i].onclick=function(){                             //给每一个按钮添加点击事件
for (var i = 0; i < btn.length; i++) {                 //初始化所有的默认样式
btn[i].style.background="#fff" //
aLi[i].style.display="none" 
}
    this.style.background="deepskyblue"               //给每一个按钮改变想要的样式
aLi[this.index].style.display="block"                 // this当前作用的对象
} 

}
</script>
</html>

Harding Duan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js实现选项卡效果

最简易的选项卡代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style type="text/css"&gt;*{margin: 0;padding: 0;list-s
复制链接

扫一扫