Question

我有ul和li。每个LI是阶段。我想通过单击Li，显示phases-text div中的文本。每个段落都分配给它的li元素。并且它应该能够在wordpress中通过klient将li的新Phase和新文本添加到phases-text div中。如果我单击LI-first元素，则应该出现p-phases-text的第一个元素，如果单击2nd LI元素，则应该出现第二个P，单击4th li元素，出现第四个p元素等。三角形也应该移到活动Li当它的P处于活动状态时。

  public void Configure(IApplicationBuilder app)
  {
        app.UseMiddleware<ErrorHandlingMiddleware>();
  }

$('.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;
}

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>

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

1 个答案: