前端页面切换怎么设置（纯前端实现-tab卡片化样式切换）
导读：纯前端实现-tab卡片化样式切换 html内容 <!DOCTYPE html>...
纯前端实现-tab卡片化样式切换
html内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡切换</title> <link rel="stylesheet" type="text/css" href="" /> </div> <div id="two"> <p> 在这个光怪陆离的人间 ，没有谁可以将日子过的行云流水 。但我始终相信 ，走过平湖山雨 ，岁月山河 ，那些历尽劫数 ，尝遍百味的人 ，会更加生动而干净 。 </p> <img src="https://www.cnblogs.com/oceaneyes-gzy/p/imgs/2.jpeg" /> </div> <div id="three"> <p> 对于三十岁以后的人来说 ，十年八年不过是指缝间的事 ，而对于年轻人而言 ，三年五年就可以是一生一世 。 </p> <img src="https://www.cnblogs.com/oceaneyes-gzy/p/imgs/3.jpeg" /> </div> <div id="four"> <p> 我要你知道 ，在这个世界上总有一个人是等着你的 ，不管在什么时候 ，不管在什么地方 ，反正你知道 ，总有这么个人 。 </p> <img src="https://www.cnblogs.com/oceaneyes-gzy/p/imgs/4.jpeg" /> </div> </div> </div> </body> <script src="https://www.cnblogs.com/oceaneyes-gzy/p/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++) { tabs[i].index =i; tabs[i].onclick = function () { for (let j = 0; j < tabs.length; j++) { tabs[j].classList.remove("active"); contents[j].classList.remove("active"); } tabs[i].classList.add("active"); contents[i].classList.add("active"); } } } init();创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！