如何通過單擊另一個div中的li顯示不同div中的文本？

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有效時。

 $('.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（）以index作為參數來選擇具有相同位置的元素以添加活動類：

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