如何切换链接(不是按钮）以显示和隐藏文本

How do I toggle a link (not button) to display and hide text

本文关键字：显示 隐藏 文本 按钮 链接 何切换      更新时间：2023-09-26

我有一个由锚标签限定的文本。用户单击它后，它应该在两个文本之间切换。

我知道如何在 JQuery 中切换按钮，但不知道如何使用 link 实现它。

<h1>Questions and Answers</h1>
<p>First Question: What is the capital of Germany?
    <br>
    <i>Click <b><a id="toggle_this"></a>Here</a></b> to show/hide answer!</i>
</p>
<p>Answer: Berlin.</p>
<script>
  $(document).ready(function() {
    $("toggle_this").click(function() {
      $(this).hide();
    });
  });
</script>

第一次将id更改为class="toggle_this"。然后使用选择器 .toggle_this .

然后，您可以使用e.preventDefault()停止默认操作（如果链接）。然后使用closest()和next()你可以得到答案，<p>然后toggle()它。

$(".toggle_this").click(function (e) {
    e.preventDefault();
    $(this).closest('p').next().toggle();
});

你可以使用jQuery（你也可以使用plain ol' JS，但看起来你使用的是以前的jQuery），使用.on方法。虽然，我首先建议您在答案中添加一个类/id，这样它更干净一些：

$(document).ready(function () {
  $('#toggle_this').on('click', function (event) {
    event.preventDefault();
    $('#answer').toggle();
  });
});

编辑：event.preventDefault()阻止锚标记导航到 href，并.on注册事件处理程序，以便在事件触发时执行指定的函数。

首先，

在"这里"之前有一个杂散的结束锚</a>标签。我也会给<p>你试图隐藏一个id，例如。 <p id="answerswer"> .

将 jQuery 更新为此。

$(document).ready(function() {
  $("#answer").hide();
    $("#toggle_this").click(function() {
      $("#answer").toggle();
    });
});
相关文章：