Muscardinus

Tabs 본문

FrontEnd/Basic Skills

Tabs

Muscardinus 2022. 3. 21. 00:06
728x90
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Tabs</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400" rel="stylesheet" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1 class="title">Tabs</h1>
    <div class="tabs">
      <!-- 자바스크립트로 동적 생성할 HTML
      <nav>
        <div class="tab" data-index="0">HTML</div>
        <div class="tab" data-index="1">CSS</div>
        <div class="tab" data-index="2">JavaScript</div>
        <span class="glider"></span>
      </nav>
      <div class="tab-content active">
        HTML(HyperText Markup Language) is the most basic building block of the Web. It describes and defines
        the content of a webpage along with the basic layout of the webpage. Other technologies besides HTML
        are generally used to describe a web page's appearance/presentation(CSS) or functionality/
        behavior(JavaScript).
      </div>
      <div class="tab-content">
        Cascading Style Sheets(CSS) is a stylesheet language used to describe the presentation of a document
        written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how
        elements should be rendered on screen, on paper, in speech, or on other media.
      </div>
      <div class="tab-content">
        JavaScript(JS) is a lightweight interpreted or JIT-compiled programming language with first-class
        functions. While it is most well-known as the scripting language for Web pages, many non-browser
        environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a
        prototype-based, multi-paradigm, dynamic language, supporting object-oriented, imperative, and
        declarative (e.g. functional programming) styles.
      </div> -->
    </div>
    <img class="spinner" src="img/ball-triangle.svg" alt="Loading..." />
    <script type="module" src="./src/app.js"></script>
  </body>
</html>
// fetch fake data
const fetchTabsData = () => {
  return new Promise(resolve => {
    setTimeout(
      () =>
        resolve([
          {
            title: 'HTML',
            content: `HTML(HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage along with the basic layout of the webpage. Other technologies besides HTML are generally used to describe a web page's appearance/presentation(CSS) or functionality/ behavior(JavaScript).`
          },
          {
            title: 'CSS',
            content: `Cascading Style Sheets(CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.`
          },
          {
            title: 'JavaScript',
            content: `JavaScript(JS) is a lightweight interpreted or JIT-compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.`
          }
        ]),
      1000
    );
  });
};

// Do something!
document.addEventListener("DOMContentLoaded", async () => {
    let currentTabIndex = 0;

    try {
        const tabsData = await fetchTabsData();
        const $tabs = document.querySelector(".tabs");
        const $spinner = document.querySelector(".spinner");

        $spinner.style.display = "none";
        $tabs.style.setProperty("--tabs-length", tabsData.length);

        const nav = tabsData.map(({title}, i) => `
            ${i === 0 ? "<nav>" : ""}
            <div class="tab" data-index="${i}">${title}</div>
            ${i === tabsData.length - 1 ? "<span class='glider'></span></nav>" : ""}
        `
        );
        const contents = tabsData.map(({content}, i) => `
            <div class="tab-content ${i === currentTabIndex ? 'active' : ''}">
                ${content}
            </div>
        `
        );
        $tabs.innerHTML = [...nav, ...contents].join("");
    } catch (e) {
        console.error(e);
    }

    document.querySelector("nav").onclick = (e) => {
        const $glider = document.querySelector(".glider");
        const $tabContents = document.querySelectorAll(".tab-content");
        currentTabIndex = +e.target.dataset.index;
        $glider.style.transform = `translate3D(${currentTabIndex * 100}%, 0, 0)`;
        $tabContents.forEach(($tabContent, i) => {
           $tabContent.classList.toggle("active", currentTabIndex === i);
        });
    }
});
728x90

'FrontEnd > Basic Skills' 카테고리의 다른 글

Checkbox  (0) 2022.03.21
Instant Search  (0) 2022.03.21
Carousel  (0) 2022.03.20
Toggle Button  (0) 2022.03.20
Chips UI  (0) 2022.03.20
'FrontEnd/Basic Skills' Related Articles more
Comments