html - 一次显示一个段落

Question

嗨，我希望在您单击按钮时一次显示一个段落。我可以让你一次只需要一个按钮来显示一个段落吗.

这是我的代码：

$("#butt1").click(function() {
  $("#para1").show();
});
$("#butt2").click(function() {
  $("#para2").show();
});

p {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="butt1">1</button>
<button id="butt2">2</button>
<p id="para1">1. Paragraph One</p>
<p id="para2">2. Paragraph Two</p>

标签： htmljquerycss

Answer 1

您应该避免为此使用标识符。如下，“ .show”必须为不包含特定类的第一个匹配定义一个目标并使其自动化。

$("#button").click(function() {
  $(this).text('Show Next Paragraph');
  $("p:not(.show)").first().addClass('show');
});

p:not(.show) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Show Paragraph</button>
<p id="para1">1. Paragraph One</p>
<p id="para2">2. Paragraph Two</p>
<p>3. Paragraph Three</p>
<p>4. Paragraph Four</p>
<p>5. Paragraph Five</p>