Question

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

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

以下是搜索您的网站的唯一答案，但是我不能让文本隐藏起来，然后点击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标记。我想要的是通过单击按钮显示单个通道。这些HIDE和SHOW按钮可以打开每个段落。

例如，在我的网站上，

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

我有两个段落，一个用法语，一个用英语。我希望用户能够显示法语，同时保持英语隐藏，反之亦然显示英语，同时隐藏法语。可能？没有？是

一如既往，感谢您的帮助。

百里

Answer 1

Jquery隐藏和显示只能切换元素的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');
  });

<强> Demo

或初始样式集

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");
    });
});

<强> Demo

请注意，display属性会将元素从页面流中移出，不会为它保留空间，如果是可见性，您将看到元素保留的空白区域

Answer 2

尝试将显示：无效

<!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>

Answer 3

我也在寻找答案，然而，对我来说有用的是这个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>

Demo

Source

从文本隐藏开始，显示文本onclick

3 个答案: