div部分
導航部分
<Row style="width: 80%;height: 60px;margin: auto;text-align: center; position: relative;top: -3px;">
判斷 active 跟item 相等的時候 用navigationA 樣式 否則 就用 navigation樣式
? <Col span="3" :class = "active=== item ? 'navigationA' : 'navigation'" v-for="item innavarr" @click.native="navclick(item)">
? ? {{item}}
</Row>
導航內容
判斷 type = 'A' 的時候顯示
<div v-if="type=== 'A'">
里面是組件
</div>
<div v-else-if="type=== 'B'">
里面是組件
</div>
<div v-else>
? Not A/B/C
</div>
js部分內容
//數據
data() {
return {
active :'背景概述',
? ? ? navigation:'navigation',
? ? ? type:'A',
? ? ? navarr:[
'背景概述',
? ? ? ? '商業綜合樓宇',
? ? ? ? '住宅酒店',
? ? ? ? '校園',
? ? ? ? '醫院',
? ? ? ? '銀行',
? ? ? ? '化工園區',
? ? ? ? '九小場所'
? ? ? ]
}
},
//方法
methods: {
navclick(item){
let me =this
? ? console.log(item)
//將點擊的元素的索引賦值給變量
? ? me.active = item
let e =item
if (e==='背景概述') {
me.type='A'
? ? }
else if (e==='商業綜合樓宇') {
me.type='B'
? ? }
else if (e==='住宅酒店') {
me.type='C'
? ? }
else if (e==='校園') {
me.type='D'
? ? }
else if (e==='醫院') {
me.type='F'
? ? }
else if (e==='銀行') {
me.type='G'
? ? }
else if (e==='化工園區') {
me.type='H'
? ? }
else if (e==='九小場所') {
me.type='I'
? ? }
}
},
css部分
.navigation{
border-right:1px solid #E9E9E9;
? color:#000000;
? font-size:16px;
? height:60px;
? line-height:60px;
}
.navigationA{
border-top:3px solid #E50000;
? border-right:1px solid #E9E9E9;
? color:#E50000;
? font-size:16px;
? height:60px;
? line-height:57px;
}
