纯前端实现-tab卡片化样式切换
纯前端实现-tab卡片化样式切换
html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡切换</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div id="main">
<div class="tabs">
<div class="red active">选项一</div>
<div class="green">选项二</div>
<div class="blue">选项三</div>
<div class="yellow">选项四</div>
</div>
<div id="content">
<div id="one" class="active">
<p>
爱情要完结的时候自会完结,到时候,你不想画上句号也不行。爱情,原来是含笑饮毒酒。</p>
<img src="./imgs/1.jpeg" />
</div>
<div id="two">
<p>
在这个光怪陆离的人间,没有谁可以将日子过的行云流水。但我始终相信,走过平湖山雨,岁月山河,那些历尽劫数,尝遍百味的人,会更加生动而干净。</p>
<img src="./imgs/2.jpeg" />
</div>
<div id="three">
<p>
对于三十岁以后的人来说,十年八年不过是指缝间的事,而对于年轻人而言,三年五年就可以是一生一世。</p>
<img src="./imgs/3.jpeg" />
</div>
<div id="four">
<p>
我要你知道,在这个世界上总有一个人是等着你的,不管在什么时候,不管在什么地方,反正你知道,总有这么个人。</p>
<img src="./imgs/4.jpeg" />
</div>
</div>
</div>
</body>
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</html>
css内容
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{background: #f5f5f5;
}#main{
width: 440px;
margin: 30px auto;
position: relative;
height: 450px;
}.tabs{
width: 440px;
height: 50px;
line-height: 50px;
display: flex;
/* list-style: none; */
/* text-align: left; */
/* margin: 0; */
/* padding: 0; */
margin-bottom: -1px;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}.tabs div {
text-align: center;
cursor: pointer;
width: 110px;
}
#content{
position: absolute;
width: 440px;
height: 400px;
overflow: hidden;
margin: 49px auto;
}#content div{
position: absolute;
width: 440px;
height: 400px;
overflow: hidden;
background-color: white;
border: 1px solid #dddddd;
padding: 20px 30px;
text-align: center;
}#content img{
display: inline-block;
max-height: 240px;
margin: 10px auto;
}#content p{
word-break: break-all;
text-align: left;
padding: 20px 0 10px 0;
}.active{
z-index: 99;
background: white;
border: 1px solid #dddddd;
border-bottom: none;
}
javascript内容
// 实现选项卡功能
function init() {
// TODO 待补充代码
var tabs = document.querySelectorAll('.tabs>div');
var contents = document.querySelectorAll('#content>div');
console.log(tabs);
console.log(contents);
for (let i = 0; i < tabs.length; i++) {
.index =i;
tabs[i].onclick = function () {
tabs[i]for (let j = 0; j < tabs.length; j++) {
.classList.remove("active");
tabs[j].classList.remove("active");
contents[j]
}.classList.add("active");
tabs[i].classList.add("active");
contents[i]
}
}
}init();
About ME
👋 读书城南,🤔 在未来面前,我们都是孩子~
- 📙 一个热衷于探索学习新方向、新事物的智能产品经理,闲暇时间喜欢coding💻、画图🎨、音乐🎵、学习ing~
👋 Social Media
🛠️ Blog: http://oceaneyes.top
⚡ PM导航: https://pmhub.oceangzy.top
☘️ CNBLOG: https://www.cnblogs.com/oceaneyes-gzy/
🌱 AI PRJ自己部署的一些算法demo: http://ai.oceangzy.top/
📫 Email: 1450136519@qq.com
💬 WeChat: OCEANGZY
💬 公众号: UncleJoker-GZY
👋 加入小组~
👋 感谢打赏~
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 OCAEN.GZY读书城南!