卡卡網(wǎng)

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

demodownload

標(biāo)記準(zhǔn)備

選項(xiàng)卡將始終放置在內(nèi)容上方并充當(dāng)導(dǎo)航，因此我們將它們包裝在一個(gè)header塊和一個(gè)nav導(dǎo)航塊中。內(nèi)容的位置將與元素一起分配section，每個(gè)選項(xiàng)卡的內(nèi)容將位于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 內(nèi)容 </article>
    <article id="tab2" class="tab-content"> Tab 2 內(nèi)容 </article>
    <article id="tab3" class="tab-content"> Tab 3 內(nèi)容 </article>
  </section>
</section>

綁定元素

要綁定鏈接及其各自的選項(xiàng)卡，我們將使用href錨點(diǎn)上的屬性和錨點(diǎn)上的id屬性，為article它們分配適當(dāng)?shù)闹怠Ｒ虼?，通過單擊每個(gè)錨點(diǎn)，瀏覽器會(huì)將我們發(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>

樣式

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

選項(xiàng)卡包裝器和帶有內(nèi)容的部分的樣式

.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;
}

選項(xiàng)卡的樣式

為了確保當(dāng)a點(diǎn)擊鏈接（錨點(diǎn)）時(shí)，相應(yīng)的內(nèi)容出現(xiàn)在頁面上，我們?cè)谄渲刑砑恿艘粋€(gè):target偽元素，該偽元素article，將選擇article相應(yīng)id的 ，鏈接指向的并出現(xiàn)在地址欄中。這里值得注意的是，如果你希望section開頭不為空，請(qǐng)傳入你希望在頁面加載時(shí)看到的 URL id，article，例如https://my.site/tabs#tab1。

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

所選文章的樣式

讓我們添加一個(gè)內(nèi)容外觀的小動(dòng)畫，如果用戶希望使用prefers-reduced-motion: reduce媒體查詢?cè)跒g覽器中看到更少的動(dòng)畫，則禁用它。

.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;
  }
}

結(jié)果

這樣就完成了一個(gè)簡(jiǎn)單的選項(xiàng)卡組件，無需 JavaScript 即可工作。

相關(guān)文章

• 6款精美漂亮的CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】
• 10款純CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】

標(biāo)簽: Tab選項(xiàng)卡  選項(xiàng)卡