자바스크립트에서 탭을 작성하는 방법-프런트엔드 Q&A-php.cn

자바스크립트에서 탭을 작성하는 방법

PHPz

풀어 주다： 2023-04-25 16:44:08

원래의

786명이 탐색했습니다.

인터넷이 발전하면서 웹사이트 인터페이스는 점점 더 멋져졌고, 탭은 현대 웹사이트의 일반적인 UI 요소 중 하나가 되었습니다. 이 기사에서는 JavaScript를 사용하여 탭을 작성하여 웹사이트를 더욱 현대적으로 만드는 방법을 소개합니다.

HTML 구조

먼저 HTML에서 탭 구조를 만들어야 합니다. 다음 코드를 사용할 수 있습니다.

<div class="tab-container">
  <ul class="tab-nav">
    <li class="tab-nav-item active">Tab 1</li>
    <li class="tab-nav-item">Tab 2</li>
    <li class="tab-nav-item">Tab 3</li>
  </ul>
  <div class="tab-content active">Tab 1 content</div>
  <div class="tab-content">Tab 2 content</div>
  <div class="tab-content">Tab 3 content</div>
</div>

로그인 후 복사

위 HTML 구조에는 카드 탐색 옵션이 포함된 탭 컨테이너(탭-컨테이너)가 포함되어 있습니다. 막대(tab-nav) 및 탭 콘텐츠(tab-content). 네비게이션 바에서 각 탭은 목록 항목(tab-nav-item)이며, "활성" 클래스를 추가하여 현재 선택된 탭을 표시할 수 있습니다. 콘텐츠에서 "활성" 클래스를 추가하여 현재 선택된 탭의 콘텐츠를 표시할 수도 있습니다.

CSS 스타일

다음으로 탭과 콘텐츠에 스타일을 추가해야 합니다. 다음 코드를 사용할 수 있습니다.

.tab-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}

.tab-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eee;
  padding: 10px;
}

.tab-nav-item {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.tab-nav-item:hover {
  background: #fff;
}

.tab-nav-item.active {
  background: #fff;
  font-weight: bold;
}

.tab-content {
  padding: 20px;
  display: none;
}

.tab-content.active {
  display: block;
}

로그인 후 복사

위 CSS 스타일은 탭의 위치, 크기, 테두리, 그림자 및 기타 속성을 설정합니다. 탐색 모음 및 탭 콘텐츠에 대한 컨테이너 및 스타일입니다. 탭 내용의 표시 속성은 없음으로 설정되어 있으며 해당 탭을 선택한 경우에만 표시됩니다.

JavaScript code

마지막으로 클릭 시 탭 스위치가 표시되도록 JavaScript 코드를 작성해야 합니다. 다음 코드를 사용할 수 있습니다.

const tabs = document.querySelectorAll('.tab-nav-item');
const contents = document.querySelectorAll('.tab-content');

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener(&#39;click&#39;, function() {
    // 首先隐藏所有选项卡内容
    for (let j = 0; j < contents.length; j++) {
      contents[j].classList.remove(&#39;active&#39;);
    }
    // 设置当前选中的选项卡添加 "active" 类
    for (let j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove(&#39;active&#39;);
    }
    this.classList.add(&#39;active&#39;);
    contents[i].classList.add(&#39;active&#39;);
  });
}

로그인 후 복사

위 JavaScript 코드는 이벤트 리스너를 사용하여 탭 탐색 모음을 클릭할 때 해당 탭 내용을 전환하는 기능을 구현합니다. 먼저 모든 탭 내용을 숨긴 다음 현재 선택된 탭과 해당 내용에 "활성" 클래스를 추가하도록 설정하여 탭 내용을 표시하는 효과를 얻습니다.

완전한 코드

마지막으로 위의 HTML, CSS 및 JavaScript 코드를 결합하여 다음과 같은 완전한 코드를 구성합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tab 选项卡</title>
  <style>
    .tab-container {
      display: flex;
      flex-direction: column;
      margin: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
    }

    .tab-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #eee;
      padding: 10px;
    }

    .tab-nav-item {
      cursor: pointer;
      padding: 10px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .tab-nav-item:hover {
      background: #fff;
    }

    .tab-nav-item.active {
      background: #fff;
      font-weight: bold;
    }

    .tab-content {
      padding: 20px;
      display: none;
    }

    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-container">
    <ul class="tab-nav">
      <li class="tab-nav-item active">Tab 1</li>
      <li class="tab-nav-item">Tab 2</li>
      <li class="tab-nav-item">Tab 3</li>
    </ul>
    <div class="tab-content active">Tab 1 content</div>
    <div class="tab-content">Tab 2 content</div>
    <div class="tab-content">Tab 3 content</div>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-nav-item');
    const contents = document.querySelectorAll('.tab-content');

    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener(&#39;click&#39;, function() {
        // 首先隐藏所有选项卡内容
        for (let j = 0; j < contents.length; j++) {
          contents[j].classList.remove(&#39;active&#39;);
        }
        // 设置当前选中的选项卡添加 "active" 类
        for (let j = 0; j < tabs.length; j++) {
          tabs[j].classList.remove(&#39;active&#39;);
        }
        this.classList.add(&#39;active&#39;);
        contents[i].classList.add(&#39;active&#39;);
      });
    }
  </script>
</body>
</html>

로그인 후 복사

이제 위 코드를 복사하고 붙여넣어 탭 탭을 직접 구현할 수 있으므로 웹사이트가 더 현대적입니다.

위 내용은 자바스크립트에서 탭을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!