代码之家 › 专栏 › 技术社区 › Arjun B K

如何使用jQuery一次只显示一个段落?

toggle jquery

Arjun B K · 技术社区 · 4 年前

我想在使用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>

1 回复 | 直到 4 年前

Rory McCrossan 4 年前

要完成您的要求,您应该显示一个按钮并对HTML进行泛化 p 元素。在每个按钮上单击,然后可以检索第一个可见的 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>

推荐文章

Mr world wide · 使用ng更改检查的ng不起作用[重复]

6 年前

user5321787 · 单击链接时的加减切换

6 年前

Marc · 单击后显示隐藏的更多按钮

6 年前

Tom · 在VueJS/VuetifyJS中切换开关时调用函数

6 年前

Rohalt · 选择单选按钮时清除输入

6 年前

Rohalt · 如何创建一个切换按钮来添加和“删除”DOM a div?

6 年前

wpdev · Jquery在引导下拉列表中禁用伪元素上的链接

6 年前

Olga B · Vue。js:切换汉堡菜单图标

6 年前

Allie Ward · 如何在页面加载时根据锚定标记在div之间切换?

6 年前

The Walrus · 在React中切换类并设置活动类

6 年前