Javascript jQuery和TailwindCss上的选项卡

这个装置有问题。 我的设计中有选项卡，当我进入页面时，它们都是打开的，当我选择某个选项卡时，其余的都是隐藏的

document.getElementById（“一”）.onclick=function（）{
showTab（这个）
};
document.getElementById（“两个”）.onclick=function（）{
showTab（这个）
};
document.getElementById（“三”）.onclick=function（）{
showTab（这个）
};
document.getElementById（“foure”）.onclick=function（）{
showTab（这个）
};
功能显示选项卡（e）{
让selectType=$（e）.attr（“数据选择”）；
如果（selectType=='one'）{
$（“#tabs2，#tabs3，#tabs4”）.hide（）；
$（“#tabs1”）.show（）；
$（“#一”）.addClass（“text-blue-800活动”）；
$（“#二，#三，#四”）.removeClass（'text-blue-800 active'）；
}else if（selectType=='two'）{
$（“#tabs1，#tabs3，#tabs4”）.hide（）；
$（“#tabs2”）.show（）；
$（“#两”）.addClass（'text-blue-800活动'）；
$（“一、三、四”）.removeClass（'text-blue-800 active'）.addClass（'text-blue-400'）；
}else if（selectType=='three'）{
$（“#tabs1，#tabs2，#tabs4”）.hide（）；
$（“#tabs3”）.show（）；
$（“#三”）.addClass（“text-blue-800活动”）；
$（“一、二、四”）.removeClass（'text-blue-800 active'）.addClass（'text-blue-400'）；
}else if（selectType=='foure'）{
$（“#tabs1，#tabs2，#tabs3”）.hide（）；
$（“#tabs4”）.show（）；
$（“#foure”）.addClass（'text-blue-800 active'）；
$（“一、二、三”）.removeClass（'text-blue-800活动'）.addClass（'text-blue-400'）；
}
}

名字1
名称2
名字3
名字4

我已将您的代码重构为此，您可以重构更多

$（文档）.ready（函数（）{
$（“.js_tap_btn”）。单击（函数（）{
$（“.js_tap_btn”）.removeClass（“active text-blue-800”）.addClass（“text-blue-400 hover:text-blue-800”）；//从所有选项卡btn中删除active和font-text-800，在所有选项卡中添加hover:text-blue-800
$（this）.removeClass（“text-blue-400悬停：text-blue-800”）.addClass（“active text-blue-800”）；//向单击的选项卡添加活动类和文本颜色
让tab_to_show=$（this）.data（“tab_id”）；//使用数据属性获取要从单击的选项卡取消隐藏的选项卡id；
$（“.js_tab_view”）.addClass（“隐藏”）；//使用tailwind css隐藏所有选项卡；
$（`#${tab_to_show}`）。removeClass（“hidden”）//仅从通缉选项卡中删除隐藏的类，请注意，我使用的是严重的重音符号，而不是倒逗号；
});
});











名字1
名称2
名字3
名字4
我已将您的代码重构为此，您可以重构更多


$（文档）.ready（函数（）{
$（“.js_tap_btn”）。单击（函数（）{
$（“.js_tap_btn”）.removeClass（“active text-blue-800”）.addClass（“text-blue-400 hover:text-blue-800”）；//从所有选项卡btn中删除active和font-text-800，在所有选项卡中添加hover:text-blue-800
$（this）.removeClass（“text-blue-400悬停：text-blue-800”）.addClass（“active text-blue-800”）；//向单击的选项卡添加活动类和文本颜色
让tab_to_show=$（this）.data（“tab_id”）；//使用数据属性获取要从单击的选项卡取消隐藏的选项卡id；
$（“.js_tab_view”）.addClass（“隐藏”）；//使用tailwind css隐藏所有选项卡；
$（`#${tab_to_show}`）。removeClass（“hidden”）//仅从通缉选项卡中删除隐藏的类，请注意，我使用的是严重的重音符号，而不是倒逗号；
});
});











名字1
名称2
名称