Javascript 交换按钮上的内容单击和下一步/上一步按钮

我需要在按钮/数字单击上交换内容。
如果您可以在代码段上看到，您可以使用按钮“1,2,3,4”或同时使用Next和Prev来访问文章。两者都可以访问同一篇文章。我的代码已在运行，但如果要使用“下一个/上一个”或“数字”按钮，则需要先刷新代码

$（文档）.ready（函数（）{
$（“.btn hover div”）。每个（函数（e）{
如果（e！=0）
$（this.hide（）；
});
$（“#下一步”）。单击（函数（）{
if（$（“.content5 div:visible，.content6 div:visible”）.next（）.length！=0）
$（“.content5 div:visible，.content6 div:visible”）.next（）.show（）.prev（）.hide（）；
否则{
$（“.content5 div:visible，.content6 div:visible”）.hide（）；
$（“.content5 div:first，.content6 div:first”）.show（）；
}
返回false；
});
$（“#上一个”）。单击（函数（）{
if（$（“.content5 div:visible，.content6 div:visible”）.prev（）.length！=0）
$（“.content5 div:visible，.content6 div:visible”）.prev（）.show（）.next（）.hide（）；
否则{
$（“.content5 div:visible，.content6 div:visible”）.hide（）；
$（“.content5 div:last，.content6 div:last”）.show（）；
}
返回false；
});
$（'.btn hover'）.first（）.addClass（'btn-active'）；
$（'.btn hover'）。单击（函数（）{
var$this=$（this）；
$SISTERS=$this.parent（）.children（），
position=$sides.index（$this）；
console.log（位置）；
$（'.content5 div'）.removeClass（'btn-active'）.eq（position）.addClass（'btn-active'）；
$（'.content6 div'）.removeClass（'btn-active'）.eq（position）.addClass（'btn-active'）；
$sides.removeClass（'btn-active'）；
$this.addClass（'btn-active'）；
});
});

一,

Lorem ipsum dolor sit amet，奉献精英。伊万尼特普罗维登特控告伊塔克·苏西皮特·阿迪皮斯

二,

Lorem ipsum dolor sit amet，奉献精英。即使是有预谋的指控，也会阻碍他人的理解、理解、辨别

三,

Lorem ipsum dolor sit amet，奉献精英。伊万尼特普罗维登特控告伊塔克·苏西皮特·阿迪皮斯


为页面提供一个具有特定ID的元素
将带有数据选项卡的DIV-分页放置在所需的任何位置

将带有数据选项卡的DIV-导航放置在您想要的任何位置



第1页洛雷姆
第2页同侧
第3页多洛

请注意
数据选项卡-*
属性如何与要控制的目标元素ID选择器匹配

一个JavaScript实例，带有一些带有自定义选项的可选对象，看起来像：

//像这样使用：
const myTabs=新选项卡（“#someElement”{
第1页，//从第二页开始（第1页索引），
btnPrev:{innerHTML:&larr；”，类名：“btn”}，
btnNext:{innerHTML:&rarr；”，类名：“btn”}，
onChange（）{
console.log（this）；
}
});
//您还可以做什么：
myTabs.show（0）；//在索引处显示页面（第一页=0）
myTabs.next（）；//转到下一页
myTabs.prev（2）；//翻两页
myTabs.next（）.next（）；//前进两页（感谢链接方法）
console.log（myTabs.page）；//获取当前页面索引

这样，您可以在使用完全相同脚本的单个文档中拥有任意多个选项卡/页面，甚至幻灯片或图库：


类选项卡{
构造函数（选择器，选项={}）{
Object.assign(
这个,{
EL：文档查询选择器（选择器），
页码：0，
选择器，
btntab:{}，//选项卡（导航）按钮的自定义属性
btnPrev:{}，//PREV按钮的自定义属性
btnNext:{}，//下一步按钮的自定义属性
classActive:“是活动的”，
onChange:（）=>{}，
},
选择权
);
this.EL_pages=this.EL.children；
this.EL_pagination=document.queryselectoral（`[data tabs pagination=“${this.selector}]”）；
this.EL_navigation=document.querySelectorAll（`[data tabs navigation=“${this.selector}]”）；
this.total=this.EL_pages.length；
this.EL_prev=this._ELNew（“按钮”{
键入：“按钮”，
文本内容：“上一页”，
onclick:（）=>this.prev（），
…这个.btnPrev，
});
this.EL_next=这个。_ELNew（“按钮”{
键入：“按钮”，
text内容：“下一步”，
onclick:（）=>this.next（），
…此.btnNext，
});
this.EL_buttons=Array.from（Array（this.total））.reduce（（arr，u，i）=>{
const EL_btn=此按钮{
键入：“按钮”，
文本内容：i+1，
onclick:（）=>（this.\u page=i），
…这个.btn基纳，
});
arr.push（EL_btn）；
返回arr；
}, []);
这个；
}
//效用函数-新元素
_ELNew=（sel，attr）=>Object.assign（document.createElement（sel），attr |{}）；
//固定负模指数
_mod=（n）=>（（n%this.total）+this.total）%this.total；
//初始化
_init（）{
//将导航按钮附加到DOM
this.EL_分页.forEach（（EL）=>EL.append（…this.EL_按钮））；
this.EL_navigation.forEach（（EL）=>EL.append（this.EL_prev，this.EL_next））；
//设置当前页面
this.\u page=this.page；
}
上一个（n=1）{
这是第页-=n；
归还这个；
}
下一个（n=1）{
这是._page+=n；
归还这个；
}
显示（idx）{
这是.\u page=idx；
归还这个；
}
设置_