这里面tabs是用了view的组件,不过不影响什么,我这里用了双层点击切换,外面一层是用的组件库
<Tabs size="small">
<Tab-pane label="语 言">
<div class="title">
<span @click="tab=0" :class="{tab_ active :tab==0}" > java</ span>
<span @click="tab=1" :class="{tab_ active : tab==1}" > cobol</span
</div>
</Tab-pane>
<Tabs pane label="类 型">
<div class="title">
<span @click="tab=10" :class="{tab_ active :tab==10}" > java</ span>
<span @click="tab=11" :class="{tab_ active : tab==11}" > cobol</span
</div>
</Tab-pane>
</Tabs>
<div class="Content">
<div class="Content_btn">
<ul v-if="tab==0">
<li>
......
</li>
</ul>
<ul v-if="tab==1">
<li>
//这里用iframe标签是想把HTML文件映射到页面展示部分
<iframe src="./url.html"></iframe>
</li>
</ul>
。。。
</div>
</div>
<script>
export default {
data() {
return {
tab:0 ,//默认 选中第一个tab
};
}
}
</ script>
这里设置点击有样式,比如点击Java的时候下面页面展示内容,Java会有样式存在,好分辨出点击的是什么对应展示的内容
<style lang="less" scoped>
.tab_active {
background:#01babc;
}
</style>