首页 > 解决方案 > 单击按钮时显示文本

问题描述

它旨在显示谜语,然后单击按钮并显示答案

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Riddles</title>
<link href="/css/favicon.ico" rel="shortcut icon" type="image/icon" />
<link href="/style.css" type="Cascading style sheet/text" />
</head>
<body>

这是链接

<li>What did the Robot say to the gas pump</li>
<script type="javascript/text">
     function unhide (){
     style(document).ready
     var hid = ("div.exp")
          if (true) hid.css("visibility",hidden);
            hid({
            visibility:visible
            });
     }
 </script>
<button onclick="unhide()">Show Answer</button>
<div class="exp">
    <p class="and">Take your finger out of your ear and listen to me</p>
</div>
<!--take your finger out of your ear and listen to me-->

style.css 是

.exp{
 visibility:hidden;
}

为什么它不起作用?因为它应该工作

我尝试了很多不同的方法

标签: javascripthtmlcss

解决方案


没有 javascript 的另一种方法是使用内部带有<details>元素的<summary>元素。浏览器将提供交互性。

<details>
  <summary>What did the robot say to the gas pump?</summary>
  <p>Take your finger out of your ear and listen to me!</p>
</details>


推荐阅读