1、效果演示
2、HTML部分
<div class="tabs">
<div class="info_tit">
<span class="pointer css3" @click="goNavList(0,'area0')"
:class="index==0?'active':'hover_span'">{{lang=='CN' ?'集团简介':'Group profile'}}</span>
<span class="pointer css3" @click="goNavList(1,'area1')"
:class="index==1?'active':'hover_span'">{{lang=='CN' ?'创始人介绍':'Introduction to the Founder'}}</span>
<span class="pointer css3" @click="goNavList(2,'area2')"
:class="index==2?'active':'hover_span'">{{lang=='CN' ?'组织架构':'Organizational structure'}}</span>
<span class="pointer css3" @click="goNavList(3,'area3')"
:class="index==3?'active':'hover_span'">{{lang=='CN' ?'企业文化':'The enterprise culture'}}</span>
<span class="pointer css3" @click="goNavList(4,'area4')"
:class="index==4?'active':'hover_span'">{{lang=='CN' ?'荣誉资质':'Honorary certificate'}}</span>
</div>
</div>
<div class="areas">
<!-- area0 GO -->
<div class="div1 introduct css3" ref="area0">
area0
</div>
<!-- area1 GO -->
<div class="div2 introduct css3" ref="area0">
area1
</div>
<!-- area2 GO -->
<div class="div3 introduct css3" ref="area0">
area2
</div>
<!-- area3 GO -->
<div class="div4 introduct css3" ref="area0">
area3
</div>
<!-- area4 GO -->
<div class="div1 introduct css3" ref="area0">
area4
</div>
</div>
3、JS部分
//data()
data(){
return:index:0,
}
//方法
toggleNext(index) {
this.goNavList(index)
},
//页面锚点定位
goNavList(val,area) {
this.index = val
// 获取 内容DIV元素在页面中的位置,div1、div2、div3.. 用padding-top,控制在tab标签下
// console.log(this.$refs[area].getBoundingClientRect().top);
switch (val) {
case 0:
this.$el.querySelector(".div1").scrollIntoView({ block: "start", behavior: "smooth" });
break;
case 1:
this.$el.querySelector(".div2").scrollIntoView({ block: "start", behavior: "smooth" });
break;
case 2:
this.$el.querySelector(".div3").scrollIntoView({ block: "start", behavior: "smooth" });
break;
case 3:
this.$el.querySelector(".div4").scrollIntoView({ block: "start", behavior: "smooth" });
break;
case 4:
this.$el.querySelector(".div5").scrollIntoView({ block: "start", behavior: "smooth" });
break;
default:
break;
}
},