时间戳

首页 > 解决方案 > 如何使用 jQuery 一次只显示一个段落？

jquery - 如何使用 jQuery 一次只显示一个段落？

问题描述

我想在使用 jQuery 打开另一个段落后隐藏一个段落。我还希望段落在页面加载或刷新时不要轻弹。

没有一个接近的解决方案解决了这个问题。

任何建议，将不胜感激。

这是片段（更新）。

$(document).ready(function () {

    $("p").hide();

    $("#btn1").click(function(){
         $("#p1").toggle();
    });

    $("#btn2").click(function(){
         $("#p2").toggle();
    });

    $("#btn3").click(function(){
         $("#p3").toggle();
    });
});
<div id="btn1" class="button"><a href="#">About</a></div>
<p id="p1">Some text.</p>

<div id="btn2" class="button"><a href="#">Story</a></div>
<p id="p2">Some text.</p>

<div id="btn3" class="button"><a href="#">Summary</a></div>   
<p id="p3">Some text.</p>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

标签： jquerytoggle

解决方案

要执行您需要的操作，您应该显示一个按钮并通用化p元素的 HTML。在每个按钮上单击，您就可以检索第一个可见p元素。从中，您可以定位下一个隐藏的p并在隐藏前一个的同时显示它。像这样的东西：

jQuery($ => {
  $('.button').on('click', () => {
    let $visible = $('p:visible');
    let $target = $visible.next('p:hidden');
    if ($target.length) {
      $visible.hide();
      $target.show();
    }
  });
});
p { display: none; }
p:first-of-type { display: block; }
<div class="button"><a href="#">Next</a></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

推荐阅读