Javascript jQuery：带装饰的可切换路径式导航

这是我的代码：

$（“#一个链接”）。单击（函数（）{
$（“#类别”）.toggle（）；
$（this.toggleClass（“活动”）；//活动类
$（this）.prepend（“▶ "); //应该切换，而不是反复插入
$（“#text_three”）.hide（）；
$（“#cats_text”）.hide（）；
$（“#text_two”）.hide（）；
});
$（“#cats_link”）。单击（函数（）{
$（“#猫#文本”）.toggle（）；
$（this.toggleClass（“活动”）；//活动类
$（this）.prepend（“▶ “”；//应该切换，而不是反复插入
$（“#text_two”）.hide（）；
$（“#text_three”）.hide（）；
});
$（“#两个链接”）。单击（函数（）{
$（“#text_two”）.toggle（）；
$（this.toggleClass（“活动”）；//活动类
$（this）.prepend（“▶ “”；//应该切换，而不是反复插入
$（“#类别”）.hide（）；
$（“#cats_text”）.hide（）；
$（“#text_three”）.hide（）；
});
$（“#三个链接”）。单击（函数（）{
$（“#text_three”）.toggle（）；
$（this.toggleClass（“活动”）；//活动类
$（this）.prepend（“▶ “”；//应该切换，而不是反复插入
$（“#类别”）.hide（）；
$（“#cats_text”）.hide（）；
$（“#text_two”）.hide（）；
})；

*{
列表样式类型：无；
保证金：0；
填充：0；
字体大小：30px；
线高：100%；
游标：默认值；
字体系列：Arial；
}
html，
身体{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.内容{
显示器：flex；
溢出：隐藏；
宽度：100vw；
高度：100vh；
}
.栏目{
右边框：1px纯黑；
}
.栏目内容{
溢出y：滚动；
宽度：100%；
身高：100%；
填充：20px；
}
.栏目{
显示：无；
}
.专栏：第一个孩子{
显示：块；
}
李：悬停{
光标：指针；
}
.主动{
文字装饰：下划线黄色；
}

一个
两个链接
三个链接


猫

猫（猫科动物）是一种小型食肉哺乳动物的家养物种。它是猫科动物中唯一驯养的物种，通常被称为家猫，以区别于该科的野生成员

2（2）是一个数字、数字和字形。它是1之后、3之前的自然数。它是最小且唯一的偶数。因为它构成了二元性的基础，所以在许多文化中具有宗教和精神意义

3（three）是一个数字、数字和字形。它是2后4前的自然数，是最小的奇数素数。它在许多社会中具有宗教或文化意义

不能说这是完美的，但我做了一些改进

对于初学者，我通过利用诸如

class

和一些

data-*

HTML属性来减少重复Javascript的数量

见：*

还请注意，我移动了您的

▶

转换为

活动

类上的伪元素

见：

$（'.tab打开按钮'）。单击（函数（）{
const openId=$（this.attr（'data-open'）；
const linkParent=$（this.attr（'data-parent-link'）；
如果（！linkParent）{
$（“#类别”）.hide（）；
}
$（'.text panel'）.hide（）；
$（openId.show（）；
$（'.tab打开按钮'）.not（linkParent.removeClass（'active'）；
$（this.addClass（'active'）；
})；

*{
列表样式类型：无；
保证金：0；
填充：0；
字体大小：30px；
线高：100%；
游标：默认值；
字体系列：Arial；
颜色：rgb（80,80,80）；
框大小：边框框；
}
html，
身体{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.内容{
显示器：flex；
溢出：隐藏；
宽度：100vw；
高度：100vh；
}
.栏目{
右边框：3px实心；
弹性收缩：0；
}
.文本面板{
弹性收缩：1；
}
.栏目内容{
溢出y：自动；
宽度：100%；
身高：100%；
填充：20px；
}
.栏目{
显示：无；
}
.专栏：第一个孩子{
显示：块；
}
李：悬停{
光标：指针；
}
.主动{
文字装饰：下划线黄色；
}
.活动：之前{
内容：“▶ "
}

一个
两个
三个


cats

猫（猫科动物）是一种家养小型食肉哺乳动物。它是唯一被驯化的动物
猫科中的一个物种，常被称为家猫，以区别于其他猫科动物
野性的家庭成员

2（2）是一个数字、数字和字形。它是1后面和3前面的自然数。它是
最小且只有偶数的素数。因为它构成了二元性的基础，所以它具有宗教和宗教色彩
许多文化中的精神意义

3（三）是一个数字、数字和字形。它是2后面4前面的自然数，是
最小的奇数素数。在许多社会中具有宗教或文化意义

谢谢您的回答！很遗憾切换功能现在不可用了。文本会在列上显示。嗯……我会考虑一下，也许会编辑这个问题，但谢谢：）你所说的文本覆盖列是什么意思？这就是我的意思：–文本链接的内容应该定义列的宽度。更新。修复涉及设置“flex”