越來越多的網站采用h5和css實現網頁設計，今天我們來介紹一種優雅簡潔的h5 css垂直選項卡效果。

首先，我們需要一個ul列表和對應的div容器，通過設置ul列表為垂直布局，div容器設置為隱藏，我們就可以實現一個基本的垂直選項卡效果。

HTML代碼：
<ul class="tabs"><li>選項卡1</li><li>選項卡2</li><li>選項卡3</li></ul><div class="tab-content"><div>選項卡1的內容</div><div>選項卡2的內容</div><div>選項卡3的內容</div></div>CSS代碼：
.tabs{
display: flex; // 設置為垂直布局
flex-direction: column;
}
.tab-content{
display: none; // 隱藏內容容器
}

然后，我們需要給每個選項卡添加點擊事件，并設置對應div容器的顯示和隱藏。通過h5中的data-*屬性，我們可以方便地實現這個過程。

HTML代碼：
<ul class="tabs"><li data-target="tab1">選項卡1</li><li data-target="tab2">選項卡2</li><li data-target="tab3">選項卡3</li></ul><div class="tab-content"><div id="tab1">選項卡1的內容</div><div id="tab2">選項卡2的內容</div><div id="tab3">選項卡3的內容</div></div>CSS代碼：
.tabs{
display: flex; // 設置為垂直布局
flex-direction: column;
}
.tab-content{
display: none; // 隱藏內容容器
}

最后，我們可以通過h5 css的動畫效果來實現選項卡的過渡效果。通過設置transition屬性可以使選項卡的切換變得更加平滑，增強用戶體驗。

CSS代碼：
.tabs{
display: flex; // 設置為垂直布局
flex-direction: column;
}
.tab-content{
display: none;
transition: all 0.5s ease; // 過渡效果
}
.active{
display: block;
}
.tabs li.active{
background-color: #999; // 選項卡的樣式
color: #fff;
}

以上就是一個h5 css垂直選項卡效果的實現過程，通過簡單的HTML和CSS代碼，我們可以實現一個優雅簡潔的選項卡效果，增強網頁的交互性和美觀度。