CSS 구현 탭

CSS는 탭 스타일을 구현합니다

탭 스타일은 웹 개발에서 매우 일반적인 인터랙티브 디자인으로, 사용자가 탭을 클릭하여 표시 영역을 전환하므로 사용 편의성이 크게 향상됩니다. 웹페이지. 이 글에서는 CSS를 사용하여 간단한 탭 스타일을 구현하는 방법을 보여 드리겠습니다.

먼저 HTML 구조를 정의해야 합니다. 구체적인 구조는 다음과 같습니다.

<div class="tab">
  <div class="tab-header">
    <button class="tab-button active">Tab 1</button>
    <button class="tab-button">Tab 2</button>
    <button class="tab-button">Tab 3</button>
  </div>
  <div class="tab-content active">
    <p>这里是 Tab 1 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 2 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 3 的内容</p>
  </div>
</div>

위 구조에서는 탭 헤더와 탭이라는 두 개의 하위 요소를 포함하는 컨테이너로 div 요소를 사용합니다. 콘텐츠. 탭 헤더는 버튼 요소를 사용하여 각 탭을 나타내고, 탭 내용은 div 요소를 사용하여 래핑됩니다. 그 중 각 탭과 탭 콘텐츠는 현재 선택된 탭을 나타내는 데 사용되는 active 클래스 이름과 연결됩니다. active 类名，用于表示当前选择的选项卡。

接下来，我们开始使用 CSS 来定义样式。首先，我们需要去掉 button 元素的默认样式：

button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

在上述样式中，我们去掉了 button 元素的背景、边框、轮廓和填充，让它看起来像一个纯文本链接。并且设置了鼠标指针的样式为手型，让它看起来更像一个可点击的按钮。

下一步，我们设置 .tab-header 的样式，来实现选项卡的背景色和激活状态：

.tab-header {
  display: flex;
}

.tab-button {
  background-color: #f4f4f4;
}

.tab-button:hover {
  background-color: #ddd;
}

.tab-button.active {
  background-color: #ddd;
}

在上述样式中，我们使用了 Flexbox 布局来使得选项卡水平排列。然后，我们定义了 .tab-button 的背景色和悬停状态的背景色。最后，我们使用类名 .active 来表示当前激活的选项卡，我们将它的背景色设置为和悬停状态相同，以便在页面加载时直接显示出选项卡的激活状态。

现在，我们只需要为每个选项卡定义一个类名，并将激活状态的类名添加到第一个选项卡中。例如：

<button class="tab-button active tab-1">Tab 1</button>
<button class="tab-button tab-2">Tab 2</button>
<button class="tab-button tab-3">Tab 3</button>

在上述结构中，我们为每个选项卡分别添加了一个类名 tab-1、tab-2、tab-3。这些类名将用于为各自的选项卡定义 CSS 样式。

下一步，我们设置 .tab-content 的样式，来实现选项卡内容的显示和隐藏：

.tab-content:not(.active) {
  display: none;
}

在上述样式中，我们使用了 :not(.active) 选择器来匹配除了激活状态之外的选项卡内容。我们设置它们的 display 属性为 none，以便让它们隐藏在页面上。

最后，我们使用 JavaScript 绑定事件，来实现点击选项卡切换内容的功能：

const tabs = document.querySelectorAll('.tab-button')

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 隐藏所有选项卡内容
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active')
    })
    // 显示当前选项卡内容
    const activeTab = tab.classList[1]
    document.querySelector(`.${activeTab}`).classList.add('active')
    // 切换选项卡的激活状态
    tabs.forEach(tab => {
      tab.classList.remove('active')
    })
    tab.classList.add('active')
  })
})

在上述代码中，我们使用了 querySelectorAll() 方法选择所有选项卡内容元素，并在点击选项卡时循环遍历它们，将它们的 active 类名全部移除。然后，我们使用 classList 属性获取当前选项卡对应的内容元素，并添加 active 类名，以便显示该选项卡内容。最后，我们将所有选项卡的激活状态移除，并为当前选项卡添加 active

다음으로 CSS를 사용하여 스타일을 정의하기 시작합니다. 먼저 버튼 요소의 기본 스타일을 제거해야 합니다.

rrreee

위 스타일에서는 버튼 요소의 배경, 테두리, 윤곽선 및 패딩을 제거하여 일반 텍스트 링크처럼 보이도록 했습니다. 그리고 마우스 포인터 스타일을 손 모양으로 설정하여 클릭 가능한 버튼처럼 보이게 만듭니다.

다음 단계에서는 .tab-header 스타일을 설정하여 탭의 배경색과 활성화 상태를 얻습니다. 🎜rrreee🎜위 스타일에서는 Flexbox 레이아웃을 사용하여 탭을 가로로 만듭니다. 준비. 그런 다음 .tab-button의 배경색과 호버 상태의 배경색을 정의합니다. 마지막으로 클래스 이름 .active를 사용하여 현재 활성화된 탭을 나타내고 배경색을 마우스오버 상태와 동일하게 설정하여 페이지를 열 때 탭의 활성 상태가 바로 표시되도록 했습니다. 로드. 🎜🎜이제 각 탭의 클래스 이름을 정의하고 활성 상태의 클래스 이름을 첫 번째 탭에 추가하기만 하면 됩니다. 예: 🎜rrreee🎜위 구조에서 각 탭에 클래스 이름을 추가했습니다: tab-1, tab-2, tab-3 코드>. 이러한 클래스 이름은 각 탭에 대한 CSS 스타일을 정의하는 데 사용됩니다. 🎜🎜다음 단계에서는 탭 콘텐츠를 표시하고 숨기도록 <code>.tab-content 스타일을 설정합니다. 🎜rrreee🎜위 스타일에서는 :not(.active )를 사용합니다. 활성 상태를 제외하고 탭의 내용과 일치하는 코드> 선택기입니다. 페이지에서 숨겨지도록 <code>display 속성을 ​​none으로 설정했습니다. 🎜🎜마지막으로 JavaScript 바인딩 이벤트를 사용하여 탭을 클릭하여 콘텐츠를 전환하는 기능을 구현합니다. 🎜rrreee🎜위 코드에서는 querySelectorAll() 메서드를 사용하여 모든 탭 콘텐츠 요소를 선택합니다. 탭을 클릭하면 탭을 반복하여 활성 클래스 이름을 모두 제거합니다. 그런 다음 classList 속성을 ​​사용하여 현재 탭에 해당하는 콘텐츠 요소를 가져오고 active 클래스 이름을 추가하여 탭 콘텐츠를 표시합니다. 마지막으로 모든 탭의 활성화 상태를 제거하고 현재 탭에 active 클래스 이름을 추가하여 활성화합니다. 이런 식으로 간단한 탭 스타일을 성공적으로 구현했습니다. 🎜🎜요약: 🎜🎜이 글에서는 CSS와 JavaScript를 사용하여 간단한 탭 스타일을 구현했습니다. 먼저 HTML 구조를 정의한 다음 CSS를 사용하여 탭의 배경색, 호버 상태 및 활성화 상태를 정의했습니다. 마지막으로 JavaScript를 사용하여 탭을 클릭하여 콘텐츠를 전환하는 기능을 구현합니다. 이 스타일의 구현은 간단하고 이해하고 수정하기 쉬우며 대부분의 웹 개발 프로젝트에 적합합니다. 🎜

위 내용은 CSS 구현 탭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!