Javascript jquerytabs：如何将类添加到tabdiv中一个单独的UL选项卡？

我正在尝试使用jQuery设置选项卡导航，而不使用jQuery选项卡UI。据我所知，当用户单击list元素时，代码

• 使用

  data tab=“X”

  获取列表元素，并添加类

  current

  ，该类将为该链接设置

  opacity:1

  （默认值：50%）
• 然后从选项卡内容部分删除

  当前

  类，并显示具有相同

  数据选项卡

  属性的相应div

我试图通过点击按钮来复制相同的过程。这似乎有效，因为它从

.tab链接

类中删除了当前类，但没有将当前类添加到相应的

ul.tabs li

元素中。 当用户按下下一个/上一个按钮时，不清楚哪个部分/选项卡是活动的/当前的，这会造成混淆的用户体验

单击“下一步”和“上一步”按钮时，如何将当前类添加到相应的

ul.tabs li

？这是jQuery问题还是CSS问题？

$（文档）.ready（函数（）{
$（'ul.tabs li'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'ul.tabs li'）.removeClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（this.addClass（'current'）；
$（“#”+tab_id）.addClass（'current'）；
});
$（'button.next-previous'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'ul.tabs li'）.removeClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（this.addClass（'current'）；
$（“#”+tab_id）.addClass（'current'）；
$（'li'）.find（'ul:first'）.addClass（'moveme'）；
$（'html，body'）。设置动画({
scrollTop:$（“#tabsNav”）.offset（）.top
}, 2000);
});
});
：根目录{
--暗绿色：203631；
--背景:#f5；
--pinkaccent:#f49393；
--白色：#fff；
--黑色：#000；
}
.formButton{
显示：内联块；
边界半径：4px；
背景色：var（--pinkaccent）；
边界：无；
颜色：#ffffff；
文本对齐：居中；
字体：斜体600 18px变量（--secondfont）；
填充：1rem2rem；
边缘顶部：10px；
光标：指针；
}
.签出号码{
宽度：30px；
高度：30px；
}
/*--------------------------------------------------------------
#我的帐户-选项卡
--------------------------------------------------------------*/
/*/链接/按钮容器/*/
ul标签{
显示：块；
保证金：0自动；
文本对齐：居中；
填充：0px；
列表样式：无；
}
/*/登录和注册链接/*/
李先生{
背景：无；
文本对齐：居中；
颜色：var（--暗绿色）；
字体系列：var（--mainfont）；
显示：内联块；
填充：10px 15px；
保证金：0自动；
字号：2rem；
不透明度：50%；
光标：指针；
}
/*/当前和选定的链接/*/
ul.tabs li.current{
不透明度：1；
}
/*/内容类/*/
.选项卡内容{
显示：无；
填充：15px；
动画：fadeEffect 1.5s；
}
/*/当前内容类/*/
.tab-content.current{
显示：继承；
}
/*从零变为完全不透明度*/
@关键帧淡出效果{
从{
不透明度：0；
}
到{
不透明度：1；
}
}



演员表


传送


检讨及；付款


账单页签

继续
交货标签

继续
返回
付款页签

您只需使用选项卡id选择带有
数据选项卡的li，例如

$("*[data-tab=\"" + tab_id+"\"").addClass('current');

这将使用您创建的
tab\u id
变量，并查找
data tab
值设置为该值的元素，例如
data tab=“tab-2”

您可以看到它在这里工作：


$（文档）.ready（函数（）{
$（'ul.tabs li'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'ul.tabs li'）.removeClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（this.addClass（'current'）；
$（“#”+tab_id）.addClass（'current'）；
});
$（'button.next-previous'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'ul.tabs li'）.removeClass（'current'）；
/*查找具有与此选项卡id匹配的数据选项卡属性的li*/
$（“*[data tab=\”“+tab\u id+“\”）.addClass（'current'）；
$（'.tab content'）.removeClass（'current'）；
$（this.addClass（'current'）；
$（“#”+tab_id）.addClass（'current'）；
$（'li'）.find（'ul:first'）.addClass（'moveme'）；
$（'html，body'）。设置动画({
scrollTop:$（“#tabsNav”）.offset（）.top
}, 2000);
});
})；
：根目录{
--暗绿色：203631；
--背景:#f5；
--pinkaccent:#f49393；
--白色：#fff；
--黑色：#000；
}
.formButton{
显示：内联块；
边界半径：4px；
背景色：var（--pinkaccent）；
边界：无；
颜色：#ffffff；
文本对齐：居中；
字体：斜体600 18px变量（--secondfont）；
填充：1rem2rem；
边缘顶部：10px；
光标：指针；
}
.签出号码{
宽度：30px；
高度：30px；
}
/*--------------------------------------------------------------
#我的帐户-选项卡
--------------------------------------------------------------*/
/*/链接/按钮容器/*/
ul标签{
显示：块；
保证金：0自动；
文本对齐：居中；
填充：0px；
列表样式：无；
}
/*/登录和注册链接/*/
李先生{
背景：无；
文本对齐：居中；
颜色：var（--暗绿色）；
字体