91精品乱码一区二区三区,欧美xxxx黑人又粗又长

技術頻道 - html技術

如何僅使用HTML和CSS創(chuàng)建自定義Tab選項卡

作者:admin 時間:2022-8-9 17:47:45 瀏覽:

如果你需要對內容進行分組并將相關信息放置在屏幕上的同一位置，那么你最好使用Tab標簽（選項卡），這是呈現信息的流行方式之一。本文將介紹如何僅使用HTML和CSS創(chuàng)建自定義Tab選項卡，無需 JavaScript 即可工作。

如何僅使用HTML和CSS創(chuàng)建自定義Tab選項卡

標記準備

選項卡將始終放置在內容上方并充當導航，因此我們將它們包裝在一個header塊和一個nav導航塊中。內容的位置將與元素一起分配section，每個選項卡的內容將位于article。

<section class="container">
  <nav class="tab-nav-wrap">
   <a href="#tab1" class="tab-nav">Tab 1</a>
   <a href="#tab2" class="tab-nav">Tab 2</a>
   <a href="#tab3" class="tab-nav">Tab 3</a>
  </nav>
  <section class="tab-content-wrap">
    <article id="tab1" class="tab-content"> Tab 1 內容 </article>
    <article id="tab2" class="tab-content"> Tab 2 內容 </article>
    <article id="tab3" class="tab-content"> Tab 3 內容 </article>
  </section>
</section>

綁定元素

要綁定鏈接及其各自的選項卡，我們將使用href錨點上的屬性和錨點上的id屬性，為article它們分配適當的值。因此，通過單擊每個錨點，瀏覽器會將我們發(fā)送到具有href。

<section class="container">
  <header>
      <nav class="tab-nav-wrap">
          <a class="tab-nav" 
             href="#tab1">Tab 1</a>
          <!-- ... -->
      </nav>   
  </header>
  <section class="tab-content-wrap">
      <article class="tab-content" 
               id="tab1">
        Tab 1 content
      </article>
      <!-- ... -->
  </section>
</section>

樣式

讓我們開始設置組件的樣式。首先，我們需要用tag-article類隱藏所有元素，并以方便的順序排列選項卡。就我而言，我將 flexbox 用于選項卡。不要忘記添加padding到選項卡以使它們更容易被點擊。我們還將為a元素添加樣式以:hover實現:focus可訪問性，以便用戶在將鼠標懸停在我們的“按鈕”區(qū)域上或使用選項卡將其突出顯示時進行區(qū)分。

.tab-nav-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tab-nav-wrap > * + * {
  margin-left: 10px;
}
.tab-content {
  display: none;
  visibility: hidden;
  opacity: 0;
}
.tab-content-wrap {
  width: 100%;
  padding: 20px 40px;
  border: 2px solid black;
  border-radius: 0 8px 8px 8px;
}

選項卡包裝器和帶有內容的部分的樣式

.tab-nav {
  padding: 7px 15px;
  border-radius: 8px 8px 0 0;
  border-left: 1px solid transparent;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  background-color: lightgray;
  color: black;
  cursor: pointer;
}
.tab-nav:hover {
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
}
.tab-nav:focus {
  outline-color: #000000dd;
  outline-style: solid;
  outline-width: thick;
}

選項卡的樣式

為了確保當a點擊鏈接（錨點）時，相應的內容出現在頁面上，我們在其中添加了一個:target偽元素，該偽元素article，將選擇article相應id的，鏈接指向的并出現在地址欄中。這里值得注意的是，如果你希望section開頭不為空，請傳入你希望在頁面加載時看到的 URL id，article，例如https://my.site/tabs#tab1。

.tab-content:target {
  display: block;
  visibility: visible;
  opacity: 1;
}

所選文章的樣式

讓我們添加一個內容外觀的小動畫，如果用戶希望使用prefers-reduced-motion: reduce媒體查詢在瀏覽器中看到更少的動畫，則禁用它。

.tab-content:target {
  animation-name: show;
  animation-duration: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .tab-content:target {
    animation: unset;
  }
}
@keyframes show {
  from {
    visibility: visible;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}