<div class="select-car">
<div class="select-A">
<div class="select-item" :id="item.item+'1'" v-for="(item,index) in EnglishBrand" :key="index" :class="{active:EngActive==item.item}" @click="modifyEnglish(item.item,$event)"><a @click="stopEvent" :href="'#'+item.item">{{item.item}}</a></div>
<!-- <div class="select-item" v-for="(item,index) in EnglishBrand" :key="index" :class="{active:EngActive==item.item}" @click="modifyEnglish(item.item)">{{item.item}}</div> -->
</div>
<div class="select-B" @scroll="scrollBrand">
<div v-for="(brand,index) in EnglishBrand" :key="index" :id="brand.item" class="select-div">
<div class="select-B-item">{{brand.item}}</div>
<ul>
<li class="select-brand" v-for="(ite,ind) in brand.list" :key="ind" @click="addTab(ite)">{{ite}}</li>
</ul>
</div>
<div class="space"></div>
</div>
</div>
data EnglishBrand:[]
methods:{
// 阻止默认行为
stopEvent(event){
event.preventDefault()
},
// 点击左侧菜单栏跳转到相应的区域
modifyEnglish(data,event){
this.EngActive = data
let selectB = document.querySelector(".select-B")
let brandDom = document.getElementById(data)
let toToParent = brandDom.offsetTop - selectB.offsetTop
if(toToParent!=0){
selectB.scrollTop = toToParent
}
},
// 滚动时左边的菜单栏也滚动
scrollBrand(){
let selectB = document.querySelector(".select-B")
let toToParent = []
let EngID = []
for(let i = 0; i<selectB.children.length;i++){
toToParent[i] = selectB.children[i].offsetTop - selectB.offsetTop
EngID[i] = selectB.children[i].id
}
for(let j = 0;j< toToParent.length;j++){
if(selectB.scrollTop>=toToParent[j]&&selectB.scrollTop<toToParent[j+1]){
let DomItem = document.getElementById(EngID[j]+'1')
DomItem.classList.add('active')
let selectDiv = document.querySelectorAll(".select-item")
for(let k = 0;k<selectDiv.length;k++){
if(selectDiv[k].id!=DomItem.id){
selectDiv[k].classList.remove('active')
}
}
}
}
}
}