JS实现的table的最终效果:

完整代码如下:
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><title>第217练</title><!– styles –><link rel=”stylesheet” href=”index.css” /></head><body><div class=”section-center”><div class=”image”><img src=”https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.hdnicewallpapers.com%2FWalls%2FBig%2FNature%2520and%2520Landscape%2FBeautiful_Sunrising_Nature_Image.jpg&f=1&nofb=1″ alt=”” /></div><div class=”tabs”><!– btn container –><div class=”btn-container”><button class=”button live” data-id=”step1″>Table 1</button><button class=”button” data-id=”step2″>Table 2</button><button class=”button” data-id=”step3″>Table 3</button></div><div class=”tabs-content”><!– single item –><div class=”content live” id=”step1″><h3>Table 1</h3><p>JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 </p></div><!– end of single item –><!– single item –><div class=”content” id=”step2″><h3>Table 2</h3><p>JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:</p></div><!– end of single item –><!– single item –><div class=”content” id=”step3″><h3>Table 3</h3><p>JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。不需要为变量添加附加文档的注释: JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:JavaScript 变量应该是自描述的。 不需要为变量添加附加文档的注释:</p></div><!– end of single item –></div></div></div><!– javascript –><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;padding: 0;font-family: sans-serif;background: #f5abc9;color: grey;}img {display: block;width: 100%;}.section-center {width: 90vw;margin: 0 auto;max-width: 1170px;min-width: 340px;padding: 5rem 0;}.image {margin-bottom: 2rem;}img {border-radius: 0.5rem;object-fit: cover;height: 30rem;}.tabs {background: #ffe5e2;border-radius: 0.5rem;grid-template-rows: auto 1fr;}.btn-container {display: grid;grid-template-columns: 1fr 1fr 1fr;}.button:nth-child(1) {border-top-left-radius: 0.5rem;}.button:nth-child(3) {border-top-right-radius: 0.5rem;}.button {padding: 1rem 0;border: none;font-size: 1rem;background: #b6c9f0;cursor: pointer;transition: all 0.3s linear;letter-spacing: 0.25rem;}.button:hover:not(.live) {background: #e93b81;color: white;}.tabs-content {padding: 2rem 1.5rem;}/* hide content */.content {display: none;}.button.live {background: #ffe5e2;}.content.live {display: block;}@media (min-width: 992px) {.image {margin-bottom: 0;}.section-center {display: grid;grid-template-columns: 1fr 1fr;column-gap: 2rem;}}
JS:
const tabs = document.querySelector(“.tabs”);const btns = document.querySelectorAll(“.button”);const articles = document.querySelectorAll(“.content”);tabs.addEventListener(“click”, function (e) {const id = e.target.dataset.id;if (id) {// remove selected from other buttonsbtns.forEach(function (btn) {btn.classList.remove(“live”);});e.target.classList.add(“live”);// hide other articlesarticles.forEach(function (article) {article.classList.remove(“live”);});const element = document.getElementById(id);element.classList.add(“live”);}});
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...