本文主要是介绍tab实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<div class="tab"><spanv-for="(item, index) in tabList":key="index"@click="handleTab(index)":class="flagIndex == index ? 'active' : ''">{{ item.name }}</span>
</div>
tabList: [{name: '公司概况'},{name: '薪酬福利'},{name: '培训发展'},{name: '风采展示'}],
handleTab (index) {this.flagIndex = index
}
.tab {width: 100%;height: 60px;display: inline-block;text-align: center;background: rgba(255, 255, 255, 0.8);margin-bottom: 70px;span {display: inline-block;height: 57px;line-height: 60px;margin-left: 70px;font-size: 16px;cursor: pointer;}.active {border-bottom: 3px solid #4281ff;color: #4281ff;font-weight: bold;}}
这篇关于tab实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!