在網頁設計中,我們經常需要實現一些多標簽切換的功能,比如說選項卡、折疊面板等。而HTML中可以通過一些簡單的標簽結構就能實現這些效果。
對于選項卡來說,我們可以使用ul和li標簽結合CSS樣式實現。以下是一個簡單的示例代碼:
<div class="tab-container">
<ul class="tab-nav">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content-container">
<div class="tab-content active">
This is Tab 1 content.
</div>
<div class="tab-content">
This is Tab 2 content.
</div>
<div class="tab-content">
This is Tab 3 content.
</div>
</div>
</div>
<style>
.tab-nav {
list-style: none;
display: flex;
justify-content: space-between;
padding: 0;
}
.tab-nav li {
flex-basis: 0;
flex-grow: 1;
text-align: center;
padding: 1rem;
cursor: pointer;
}
.tab-nav li.active {
background-color: #f8f8f8;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
在上述代碼中,我們使用了一個tab-container來包含整個選項卡,其中的tab-nav就是選項卡的導航欄,每個選項卡都是一個tab-nav里的一個li標簽。我們使用CSS的flex布局讓這些選項卡等分父元素,并設置了光標指針為手型,以便用戶點擊。
在tab-container里還有一個tab-content-container,也就是選項卡的內容容器。在這個容器里包含了三個tab-content標簽,分別是內容1/2/3。這些內容標簽默認是隱藏的,只有在與當前選項卡一致的情況下才會顯示,我們通過CSS將.tab-content { display: none; },并對.tab-content和.active有相應的樣式設置,來實現選項卡切換。
以上就是一個簡單的選項卡實現。我們還可以根據需求,自由地使用HTML標簽與CSS樣式進行設置。同時我們還可以運用JavaScript來實現一些復雜的交互效果。
上一篇vue 彈框
下一篇MySQL購買第三方數據