Vue 中用 HTML + CSS 实现 Tabs 标签页绘制

上一篇博客介绍了Vue 中用 HTML + CSS 实现导航按钮动画绘制，这一篇介绍绘制 Tabs 标签页的过程，先看效果：
默认是 Tab1 亮起

鼠标指针滑到 Tab2，Tab2亮起

点击 Tab3，Tab3 亮起

绘制过程很简单，最重要的是用到了 border-bottom，相比其他复杂的实现过程看起来更为容易，希望能帮助到自己画 Tabs 标签页的朋友们。其实画起来不是很困难，大家一定要一行代码一行代码亲自试试！多调一调就能有自己的收获

<template><div class="tabBarArea"><div class="tabBarBtn" :class="[tabName=='Tab1'?'tabBarBtnActive':'']"@click="tabName='Tab1'">Tab1</div><div class="tabBarBtn" :class="[tabName=='Tab2'?'tabBarBtnActive':'']"@click="tabName='Tab2'">Tab2</div><div class="tabBarBtn" :class="[tabName=='Tab3'?'tabBarBtnActive':'']"@click="tabName='Tab3'">Tab3</div><div class="tabBarBtn" :class="[tabName=='Tab4'?'tabBarBtnActive':'']"@click="tabName='Tab4'">Tab4</div></div>
</template><script> export default {
     name: 'TabsPractice',data() {
     return {
     tabName: 'Tab1',};}, }; </script>
<style scoped>.tabBarArea {
     padding-top: 20px;position: relative;}.tabBarArea:after{
     display: block;content: '';clear: both;}.tabBarBtn {
     float: left;margin-left: 30px;cursor: pointer;padding: 2px 10px;}.tabBarBtn:hover {
     color: #326BE8;border-bottom: 2px solid #326BE8;border-top:0px;border-left:0px;border-right:0px;}.tabBarBtnActive {
     color: #326BE8;border-bottom: 2px solid #326BE8;border-top:0px;border-left:0px;border-right:0px;}.tabBarBtnActive:hover {
     color: #326BE8;} </style>