左侧菜单栏,有对个li对应一个content

html部分截图

不多说直接上js

/*左侧导航栏*/
var sect=$(".sect");

$(".nav-list .nav-a").each(function(i){
$(this).on("click",function(){
$(this).addClass("cur").siblings().removeClass("cur");
$(".content-all .sec").eq(i).removeClass("hide").siblings().addClass("hide");
$("body,html").animate({
scrollTop:0
},300);
});
})
/*多个内容一个页面*/
$(".nav-list .nav-btli").each(function(i){
$(this).on("click",function(){
$(this).addClass("cur").siblings().removeClass("cur");
if(i*1<2){
$(".section68").removeClass("hide").siblings().addClass("hide");
}else if(i*1>=2 && i*1<4){
$(".section113").removeClass("hide").siblings().addClass("hide");
}
if(i==0 || i==2){
$('body,html').animate({
scrollTop:0
},300);
}else{
$('body,html').animate({
scrollTop:sect.eq(i).offset().top
},300);
}
});
})

总结:就相当于你把这1对1和多对1区分成两个不同的东西

日常所遇,随手而记。
原文地址:https://www.cnblogs.com/zhihou/p/6555094.html