从隐藏文本开始，单击时显示文本

Start with Text hidden, show text onclick

本文关键字：文本 显示 单击 开始 隐藏      更新时间：2023-09-26

这绝对超出了我的头脑，但我不得不问。 我真正想做的，是从隐藏文本开始，只有 SHOW 按钮，然后单击它以显示文本。它适用于法语词典网站，有人听一个法语短语，在表单文本字段中写下他认为他听到的内容，然后单击 SHOW 按钮以查看他是否正确。 我尝试将 P 标签更改为隐藏可见性，但然后单击 SHOW 按钮不会显示它。

我在切换下搜索，但似乎没有一个响应适合我的。

这是搜索您的网站的唯一答案，但我无法使文本开始隐藏，然后通过单击"显示"按钮显示它。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

感谢您的任何帮助。

巴里

好的，是的，我已经看到了，但这仍然会在页面上打开带有display:none的任何 P 标签。 我想要的是让单个段落能够通过单击按钮来显示。 这些隐藏和显示按钮打开每个段落。

例如，在我的网站上，

http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee

我有两篇文章，一篇是法文，一篇是英文。 我希望用户能够显示法语，同时隐藏英语，反之亦然，在隐藏法语的同时显示英语。 可能？ 不？ 是的？

与往常一样，感谢您的任何帮助。

巴里

Jquery hide and show 只能切换元素的 display 属性，而不能切换可见性。您可以最初使元素display:none，也可以更改visibility而不是hide/show。

  var $p = $('p');
  $("#hide").click(function(){
    $p.css('visibility', 'hidden');
  });
  $("#show").click(function(){
    $p.css('visibility', 'visible');
  });

或只是：

 $("#hide, #show").click(function(){
      $('p').css('visibility', this.id == "show" ? 'visible' : 'hidden');
  });

演示

或在初始样式集中

p{ /*This can vary based on which p you want to hide first*/
   display: none; /*Instead of visibility*/
}

只是一个缩短的版本。

$(document).ready(function () {
    $("#hide, #show").click(function () {
        $("p").toggle(this.id == "show");
    });
});

演示

请注意，显示属性会将元素从页面流中取出，不会为其保留空间，在可见性的情况下，您将看到元素保留的空白空间

尝试显示：无将起作用

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p style="display:none">If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
我也

在寻找答案，但是，对我有用的是JQuery的这个小代码：

<div style="display: none;" id="hiddenText">This is hidden</div>
<a href="#" onclick="$('#hiddenText').show(); return false;">Click here to show hidden 
text</a>

演示

源

相关文章：