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

Question

我有 ul 和里面的 li。每个 LI 都是阶段。我想通过点击Li，phases-text div中的文本显示出来。每个段落都分配给它的 li 元素。它应该能够通过WordPress中的klient添加li中的新阶段和新文本到phases-text div中。如果我单击 LI-first 元素，则应出现阶段文本的第一个元素，如果单击第二个 LI 元素，则应出现第二个 P，单击第四个 li 元素，出现第四个 p 元素等。此外，三 Angular 形应移动到事件 Li当其 P 处于事件状态时。

$('.phases ul li').on('click', function(e) {
  e.preventDefault();
  if($(this).hasClass('active')){
    $(".phases-text .active").removeClass('active');
  }else{
    $(this).addClass('active');
    $(".phases-text .active").addClass('active');
  }
});

.phases ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    text-align: center;
    position: relative;
}

.phases ul li {
    cursor: pointer;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.phases ul li.active:after{
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-left: 2px solid rgba(2,139,207, .5);
    border-top: 2px solid rgba(2,139,207, .5);
    background-color: #fff;
    bottom: -26.4px;
    left: 40%;
}

.phases-text p {
    display: none;
}

.phases-text {
    padding: 10px 10px;
    border: 2px solid rgba(2,139,207, .5);
}

.phases-text p.active {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='phases'>
            <ul>
                <li class='active'>Faza anagenu</li>
                <li>Faza katagenu</li>
                <li>Faza telogenu</li>
            </ul>
            <div class="phases-text">
                <p class='active'>Lorem ipsum</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor purus, rutrum aliquet purus sit amet, vestibulum semper sem. Nunc pellentesque rhoncus cursus. </p>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</p>
            </div>
        </div>

Answer 1

您应该使用index()获取单击元素的编号位置和 eq()以索引为参数选择相同位置的元素添加事件类:

$('.phases ul li').on('click', function(e) {
  e.preventDefault();
  $('.phases ul li.active').removeClass('active');
  $(this).addClass('active');
  
  $(".phases-text > .active").removeClass('active');
  $(".phases-text p").eq($(this).index()).addClass('active')
  
});

.phases ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    text-align: center;
    position: relative;
}

.phases ul li {
    cursor: pointer;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.phases ul li.active:after{
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-left: 2px solid rgba(2,139,207, .5);
    border-top: 2px solid rgba(2,139,207, .5);
    background-color: #fff;
    bottom: -26.4px;
    left: 40%;
}

.phases-text p {
    display: none;
}

.phases-text {
    padding: 10px 10px;
    border: 2px solid rgba(2,139,207, .5);
}

.phases-text p.active {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='phases'>
            <ul>
                <li class='active'>Faza anagenu</li>
                <li>Faza katagenu</li>
                <li>Faza telogenu</li>
            </ul>
            <div class="phases-text">
                <p class='active'>Lorem ipsum</p>
                <p>Dolor sit amet, consectetur adipiscing elit. Etiam dolor purus, rutrum aliquet purus sit amet, vestibulum semper sem. Nunc pellentesque rhoncus cursus. </p>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</p>
            </div>
        </div>