Javascript 如何通过单击另一个div中的li来显示不同div中的文本？

我有ul和li。每一个阶段都是不同的。我想通过点击Li，在阶段文本div显示文本。每个段落都指定给其li元素。它应该能够通过wordpress中的klient在li中添加新阶段，并将新文本添加到phases text div中。如果单击li第一个元素，则应显示阶段文本的p第一个元素，如果单击第二个li元素，则第二个p应为apear，第四个li元素单击，第四个p元素apear等。当其p处于活动状态时，三角形也应移动到活动li

$（'phases ul li'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（$（this）.hasClass（'active'））{
$（“.phases text.active”）.removeClass（'active'）；
}否则{
$（this.addClass（'active'）；
$（“.phases text.active”）.addClass（“active”）；
}
});
.ul{
显示器：flex；
弯曲方向：行；
列表样式类型：无；
文本对齐：居中；
位置：相对位置；
}
.李先生{
光标：指针；
位置：相对位置；
左侧填充：10px；
右边填充：10px；
}
.阶段ul li.活动：之后{
内容：“；
显示：块；
位置：绝对位置；
保证金：自动；
宽度：20px；
高度：20px；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
-ms变换：旋转（45度）；
左边框：2倍实心rgba（2139207.5）；
边框顶部：2个实心rgba（2139207.5）；
背景色：#fff；
底部：-26.4px；
左：40%；
}
.阶段文本p{
显示：无；
}
.阶段文本{
填充：10px 10px；
边框：2倍实心rgba（2139207.5）；
}
.阶段文本p.active{
显示：块；
}


法扎伊格纳
法扎卡塔赫努
法扎休止期

Lorem ipsum
Lorem ipsum dolor sit amet，是一位杰出的献身者。白藜芦，白藜芦，前庭扫描电镜。努克·佩伦茨克·朗库斯·库苏斯

“如果你是我的朋友，那你就是我的朋友。”

您应该使用以获取单击元素的编号位置，并使用索引作为参数来选择具有相同位置的元素以添加活动类：


$（'phases ul li'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'.phases ul li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（“.phases text>.active”）.removeClass（'active'）；
$（“.phases text p”）.eq（$（this.index（））.addClass（'active'））
});
.ul{
显示器：flex；
弯曲方向：行；
列表样式类型：无；
文本对齐：居中；
位置：相对位置；
}
.李先生{
光标：指针；
位置：相对位置；
左侧填充：10px；
右边填充：10px；
}
.阶段ul li.活动：之后{
内容：“；
显示：块；
位置：绝对位置；
保证金：自动；
宽度：20px；
高度：20px；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
-ms变换：旋转（45度）；
左边框：2倍实心rgba（2139207.5）；
边框顶部：2个实心rgba（2139207.5）；
背景色：#fff；
底部：-26.4px；
左：40%；
}
.阶段文本p{
显示：无；
}
.阶段文本{
填充：10px 10px；
边框：2倍实心rgba（2139207.5）；
}
.阶段文本p.active{
显示：块；
}


法扎伊格纳
法扎卡塔赫努
法扎休止期

Lorem ipsum
多洛·塞特·艾米特，奉献给我们的精英们。白藜芦，白藜芦，前庭扫描电镜。努克·佩伦茨克·朗库斯·库苏斯

“如果你是我的朋友，那你就是我的朋友。”

很高兴能帮助您。